一、设置路由

在powershell创建的时候
选择add router （yes）

二、配置路由

添加好组件后
在app-routing.module.ts中的const routes: Routes = []里可以配置路由
如果是跳转页面要写在前面 否则会转到”“**

const routes: Routes = [
  {
    path:'home',
    component:HomeComponent
  },{
    path:'news',
    component:NewsComponent
  },{
    path:"about",
    component:AboutComponent
  }
];

三、错误导向页面配置

在app-routing.module.ts中的const routes: Routes = []里可以配置

{
    path:"**",
    component:ErrorComponent
  }

四、路由重定向

在app-routing.module.ts中的const routes: Routes = []里可以配置

{
    //匹配没有设置的路由
    path:"",
    redirectTo:"home",
    pathMatch:"full"
  }

五、app.component.html

<router-outlet></router-outlet>
//约等于 <router-view>

六、route-link

  <li><a [routerLink]="['/home']"  >home</a></li>
  <li><a [routerLink]="['/about']"  >about</a></li>
  <li><a [routerLink]="['/news']"  >news</a></li>

七、routerLinkActive设置当前router

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

然后css内改样式

.router-link-active{
    color: red;
}