路由配置：路由配置是一個Routes類型的數(shù)組

例如：

const routes:Routes = [
    {
        path: '', component: BuildDataComponent,
        children: [
            {path: '', redirectTo: 'addData'},
            {
                path: 'addData', component: AddDataComponent, data: {breadcrumb: 'aaa'}
            },
            {
                path: 'test1', component: test1Component, data: {breadcrumb: 'bbb'}
            },
            {
                path: 'test2', component: test2Component, data: {breadcrumb: 'ccc'}
            }
        ]
    }
];

創(chuàng)建根路由模塊：

通過調(diào)用RouterModule.forRoot()方法來創(chuàng)建根路由模塊，并將其導(dǎo)入到應(yīng)用的根模塊中
例如：

@NgModule({
   
    bootstrap: [App],
    declarations: [App, ExceptionComponent],
    imports: [
        RouterModule.forRoot(routes), // 
        RouterModule.forRoot()方法來創(chuàng)建根路由模塊
    ]
})

添加RouterOutlet指令

RouterOutlet指令的作用是在組件的模板中開辟出一塊區(qū)域，用于顯示URL所對應(yīng)的組件。Angular將在模板中使用了<router-outlet>標(biāo)簽的組件統(tǒng)稱為路由組件。
例如：
<main class="main">
<router-outlet></router-outlet>
</main>

路由策略

路由策略決定angular將使用URL的哪一部分來和路由配置項的path屬性進(jìn)行匹配。angular提供了PathLocationStrategy和HashLocationStartegy兩種路由策略，分別表示使用URL的path部分和hash部分來進(jìn)行路由匹配。
1.HashLocationStartegy介紹
http://localhost:3000/#/list
（1）瀏覽器向服務(wù)器發(fā)送請求的時候不會帶上hash部分的內(nèi)容。#后面的部分是hash的內(nèi)容
（2）更改url的hash部分不會向服務(wù)器重新發(fā)送請求，這就使得在進(jìn)行跳轉(zhuǎn)的時候不會引起頁面的刷新和應(yīng)用的重新加載。
2.PathLocationStrategy介紹
http://localhost:3000/list
作為angular的默認(rèn)路由策略，其最大的優(yōu)點是為服務(wù)器端的渲染提供了可能。
例如：
瀏覽器向服務(wù)器端發(fā)送請求http://localhost:3000/list，服務(wù)器可以通過解析URL的path部分/list得知所要訪問的頁面，對其進(jìn)行渲染并將結(jié)果返回給瀏覽器。
使用PathLocationStrategy路由策略，必須滿足三個條件
（1）瀏覽器需要支持HTML5的history.pushState()方法，這個方法可以使RouterLink指令在跳轉(zhuǎn)時即使更改了URL的path部分，也不會引起頁面的刷新。
（2）在服務(wù)器上進(jìn)行設(shè)置，將應(yīng)用的所有URL重定向到應(yīng)用的首頁，這是因為該應(yīng)用所生成的URL在服務(wù)器上并不存在與相對應(yīng)的文件結(jié)構(gòu)，如果不進(jìn)行重定向，服務(wù)器將返回404錯誤。
（3）需要為應(yīng)用設(shè)置一個base路徑，Angular可以以base路徑為前綴來生成和解析URL?？梢栽趇ndex.html頁面中<base>標(biāo)簽的href屬性中設(shè)置，也可以通過向應(yīng)用中注入APP_BASE_HREF變量來實現(xiàn)。
providers：[{provide:APP_BASE_HREF,useValue:'/app'}]

路由跳轉(zhuǎn)

（1）指令跳轉(zhuǎn)
使用RouterLink指令來完成跳轉(zhuǎn)。可以被應(yīng)用到任何HTML元素上，使頁面跳轉(zhuǎn)不需要依賴超鏈接。當(dāng)routerLink處于激活狀態(tài)時，該元素就可以獲得routerLinkActive指定的css類.active。
例如

<div class="tab-header-item" [routerLink]="['currentData']" routerLinkActive="active" >
           我是誰
</div>

（2）使用代碼跳轉(zhuǎn)
可以使用Router.navigateByUrl()或Router.navigate()來完成。

路由參數(shù)

（1）path參數(shù)
path參數(shù)是通過解析url中的path部分來獲取參數(shù)的，在定義一個配置項的path屬性的時候，可以使用“/”字符來對path屬性進(jìn)行分段。如果一個分段以“ ：”字符開頭，則URL中的該分段進(jìn)行匹配的部分將作為參數(shù)傳遞到組件中。
angular應(yīng)用從一個頁面跳轉(zhuǎn)到另一個新的頁面，實質(zhì)上是從一個配置項跳轉(zhuǎn)到另一個配置項。
（2）Query參數(shù)
每個配置項可以有任意多個查詢參數(shù)，
http://localhost:3000/list?limit=5
也可以通過RouterLink指令給或者跳轉(zhuǎn)的方法來賦值。
<a [routerLink]="['/list']" [queryParams]="{limit:5}">
this._router.navigate(['/list'],{queryParams:{limit:5}});
this._router.navigateByUrl('/list?limit=5');

子路由和附屬Outlet

一、子路由
angular允許一個路由組件被嵌套到另一個路由組件中，從而建立路由的多級嵌套關(guān)系。children是用來配置子路由

const routes: Routes = [
    {
        path: '', component: DataGeneralViewComponent,
        children: [
            {path: '', redirectTo: 'currentData'},
            {
                path: 'currentData', component: DataViewComponent, data: {breadcrumb: 'aaa'},
            },
            {
                path: 'operatorData', component: DataOperatorHistoryComponent, data: {breadcrumb: 'bbb'}
            },
            {
                path: 'historyData', component: DataHistoryComponent, data: {breadcrumb: 'ccc'}
            },{
                path: 'test', component: DataTestComponent, data: {breadcrumb: 'ddd'}
            }
        ]
    }
];

二、Matrix參數(shù)

angular提供了Matrix參數(shù)，它通過在連接參數(shù)數(shù)組中插入一個對象來進(jìn)行賦值。
例如

<a [routerLink]="['/detail',this.contact_id,{after:'2015-01-01',before:'2015-12-31'},'album']"
angular會將對象的屬性轉(zhuǎn)化成以“；”為分隔符的鍵值對，拼接到與該對象左邊最近的url分段上。
http://localhost:3000/detail/6;after=2015-01-01;before=2015-12-31/album

三、附屬Outlet
angular允許一個路由組件包含多個Outlet，從而可以在一個路由組件中同時顯示多個組件。其中主要Outlet有且僅有一個，附屬Outlet可以有任意多個，各個附屬Outlet通過不同的命名加以區(qū)分。每個Outlet均可以通過路由配置來指定其可以顯示的組件。
例如

export const rootRouterConfig: Routes = [
{path: 'detail/:id',component: DetailComponent,
 children: [
   {path: '',component: AnnotationComponent},
   {path:'album', component: AlbumComponent},
  //附屬路由
   {path: 'annotation', component； AnnotationComponent，outlet:'aux'},
   {path: 'album', component； AlbumComponent，outlet:'aux'},
]}
]

路由攔截

angular的路由攔截允許從一個配置項跳轉(zhuǎn)到另一個配置項之前執(zhí)行指定的邏輯，并根據(jù)執(zhí)行的結(jié)果來決定是否進(jìn)行跳轉(zhuǎn)。
CanActive：激活攔截
CanActiveChild:與CanActive類似，用于控制是否允許激活子路由配置項。
CanDeactivate：反激活攔截
Resolve：數(shù)據(jù)預(yù)加載攔截
CanLoad：模塊加載攔截

模塊的延遲加載

1.延遲加載實現(xiàn)

loadChildren指定了延遲加載模塊的路徑，#后面表示模塊類名。
2.模塊預(yù)加載

preload設(shè)置為true，加載方式由原來的延遲加載變?yōu)轭A(yù)加載。

3.模塊加載攔截
CanLoad
例如：

@Injectable()
export class CanLoadGuard implements CanLoad{
    canLoad(route: Route){
       console.log(route.path);
       if(/*允許加載*/){
           return true;
       }else{
           return false;
       }
   }
}
在延遲加載配置項中指定CanLoad攔截服務(wù)
最后需要將CanLoad攔截服務(wù)注入到根模塊中
@NgModule({
     providers: [CanLoadGuard]
})
export class AppModule{}