angular路由

angular路由：

1.app-routing.module.ts    配置

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewsComponent } from './views/news/news.component';
import { AboutComponent } from './views/about/about.component';
import { IndexComponent } from './views/index/index.component';
import { Page404Component } from './views/page404/page404.component';

const routes: Routes = [
  {
    path:'',
    component:IndexComponent,
  },
  // 动态路由
  {
    path:'news/:id',
    component:NewsComponent,
  },
  {
    path:'about',
    component:AboutComponent,
  },
  // 找不到的页面
  {
    path:'**',
    component:Page404Component,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. app.component.html

<div>
  <span [routerLink]="['']">首页</span>
  <span [routerLink]="['/about']">about</span>
  <span [routerLink]="['/news']">news</span>
</div>

<router-outlet></router-outlet>