angular 路由 第二篇

1.重定向數組

關鍵詞 redirectTo,pathMath;
redirectTo 表示 地址,
pathMath 表示 匹配原則 (full:徹底一致,prefix:前綴一致)。
用法:{path:'',redirectTo:'/page1',pathMatch:'full'};

2.子路由ide

關鍵詞 children
使用方法:
{path:'page1',children:[{path:'page3',component:Page3Component}]}

3輔助路由code

關鍵詞 outlet
用法 
     <a [routerLink]="['',{outlets:{test1:'page1',test2:'page2'}}]">
     <router-outlet name='test1'></router-outlet>
     <router-outlet name='test2'></router-outlet>
     {path:'page1',component:Page1Component,outlet:'test1'},
     {path:'page2',component:Page1Component,outlet:'test2'};
從代碼字面上來看,就是一下傳進多個路由的信息,輔助理由的組件只能在本身outlet的屬性的插座裏顯示,輔助路由也只能顯示設置outlet屬性爲自身的組件。

4.路由守衛component

關鍵詞 canActivate;
用法:
1.新建一個守衛
import{ CanActivate } from '@angular/router';
export Guard class implements CanActivate {
    canActivate(){
    return boolean;
    }
}
2.依賴注入到配置路由的ts中
import { Guard } from ....;
@ngModules{
.....,
providers:[Guard]
};
3.調用
{path:'page1',component:Page1Component,canAcvitate:[Guard]}

守衛能夠配置多個,因此是一個數組。
相關文章
相關標籤/搜索