5-1一级路由

angular-cli中选中路由,之后app.component.html会多出

//相当于vue中

• 一级路由
• 路由重定向
• 不匹配路由的处理(404)

  一、在app-routing.module.ts中配置

import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';
import { AboutComponent } from './components/about/about.component';
import { ErrorComponent } from './components/error/error.component';
const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },{
    path:'news',
    component:NewsComponent
  },{
    path:"about",
    component:AboutComponent
  },{
      //路由重定向
    path:"",
    redirectTo:"home",
    pathMatch:"full"
  },{
    // 匹配没有设置的路由
    path:"**",
    component:ErrorComponent
  }
];
...
export class AppRoutingModule { }

二、routerLInkActive设置routerLink默认选中的路由

<ul>
  <li><a [routerLink]="['/home']"  routerLinkActive="router-link-active">home</a></li>
  <li><a [routerLink]="['/news']"  routerLinkActive="router-link-active">news</a></li>
  <li><a [routerLink]="['/about']" routerLinkActive="router-link-active">about</a></li>
</ul>