Angular——路由

重定向路由

在用户访问一个特定的地址时，将其重定向另外一个指定的地址

例子，在app-routing.moudle.ts中配置重定向路由

const routes: Routes = [
  {path:'home',component:HomeComponent },
  {path:'**',component:Code404Component}
];

没有添加之前，系统会默认匹配路由，匹配到出错页面

const routes: Routes = [
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'home',component:HomeComponent },
  {path:'**',component:Code404Component}
];

添加重定向路由之后，系统会自动跳转到指定的路由当中

子路由（父子关系）

将子组件显示在父组件中

const routes: Routes = [
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'home',component:HomeComponent },
  {path:'product/:id',component:ProductComponent, children:[
    {path:'',component:ProductDescComponent},
    {path:'seller/:id',component:SellerInfoComponent}
  ]},
  {path:'**',component:Code404Component}
];

辅助路由（兄弟路由）

1.在app.component.html中定义一个辅助路由

<router-outlet name="aux"></router-outlet>

2.在app-routing.module.ts中定义辅助路由

  {path:'chat',component:ChatComponent,outlet:"aux" },

3.通过app.component.html链接控制路由开关

<a [routerLink]="[{outlets:{aux:'chat'}}]" >开始聊天</a>
<a [routerLink]="[{outlets:{aux: null}}]" >结束聊天</a>