angular 路由

在路由时传递数据

1. 在查询参数中传递数据

/product?id=1&name=2 => ActivatedRoute.queryParams[id]

2.在路由路径中传递数据

{path:/product/:id} => /product/1 => ActivatedRoute.params[id]

3. 在路由配置中传递数据

{path:/product, component: ProductComponent, data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

重定向路由

const routes:Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'}
]

子路由<router-outlet></router-outlet>

{path:'home',component:HomeComponent,
    children:[
      {path:'',component:XxxComponent},
      {path:'/yyy', component:YyyComponent}
  ]
}

辅助路由

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

{path: 'xxx',component:XxxComponent,outlet:'aux'}
{path: 'yyy',component:YyyComponent,outlet:'aux'}

<a [routerLink]="['/home',{outlets:{aux:'xxx'}}]">Xxx</a>
<a [routerLink]="['/product',{outlets:{aux:'yyy'}}]">Yyy</a>

路由守卫

CanActivate:处理导航到某路由的情况
CanDeactivate:处理从当前路由离开的情况
Resolve:在路由激活之前获取路由数据