導航是很簡單的，只是不同頁面之間的切換，路由是實現導航的一種。

一個url對應的一個頁面，在angular2中是一個組件。定義一個規則。

基礎知識

大多數帶路由的應用都要在index.html的標簽下先添加一個元素，來告訴路由器該如何合成導航用的URL。

路由是從@angular/router包中引入的。

路由都是需要進行配置的。而這個配置需要的也就是RouterModule模塊。

一個路由配置

path中不能用斜線/開頭。

這些路由的定義順序是故意如此設計的。 路由器使用先匹配者優先的策略來匹配路由，所以，具體路由應該放在通用路由的前面。在上面的配置中，帶靜態路徑的路由被放在了前面，后面是空路徑路由，因此它會作為默認路由。而通配符路由被放在最后面，這是因為它是最通用的路由，應該只在前面找不到其它能匹配的路由時才匹配它。

const appRoutes: Routes = [ { path:'',// empty path匹配各級路由的默認路徑。 它還支持在不擴展URL路徑的前提下添加路由。 component: DashboardComponent },{ path: 'dashboard', component: DashboardComponent }, { path: 'loopback', component: LoopbackComponent }, { path: 'heroparent', component: HeroParentComponent }, { path:'version', component: VersionParentComponent }, { path: '**',// **代表該路由是一個通配符路徑。如果當前URL無法匹配上我們配置過的任何一個路由中的路徑，路由器就會匹配上這一個。當需要顯示404頁面或者重定向到其它路由時，該特性非常有用。 component: DashboardComponent, } ]; export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

RouterOutlet - 路由插座

顯示路由器生成的視圖。在展示父路由的位置中的某個地方展示子路由對應的地方。

路由模塊

最開始的路由，我們是直接寫在app.module.ts文件中的，像這樣，我們可以實現簡單的導航。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { CrisisListComponent } from './crisis-list.component'; import { HeroListComponent } from './hero-list.component'; const appRoutes: Routes = [ { path: 'crisis-center', component: CrisisListComponent }, { path: 'heroes', component: HeroListComponent } ]; @NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot(appRoutes) ], declarations: [ AppComponent, HeroListComponent, CrisisListComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

但是這樣不方便，所以我們要進行路由的分離，重構成我們自己的路由模塊。like this:

const appRoutes: Routes = [ { path:'', component: DashboardComponent },{ path: 'dashboard', component: DashboardComponent }, { path: 'loopback', component: LoopbackComponent }, { path: 'heroparent', component: HeroParentComponent }, { path:'version', component: VersionParentComponent }, { path: '**', component: DashboardComponent, } ]; export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(appRoutes);

同樣我們還可以寫多個路由模塊。但是我們必須在app.module.ts中進行imports:[appRoutingModule]。

組件路由

我們需要將一些特征區域分割開來，做成自己單獨的模塊。必如hero模塊。在這里，我們需要hero單獨的導航，這也就是組件路由。

平級的路由

@NgModule({ imports: [ RouterModule.forChild([ { path: 'heroes', component: HeroListComponent }, { path: 'hero/:id', component: HeroDetailComponent }, { path:'heroform', component: HeroFormComponent }, ]) ], exports: [ RouterModule ] }) export class HeroRoutingModule { }

我們還有另外一中類型的路由組織方式，路由樹的形式。

const crisisCenterRoutes: Routes = [ { path: '', redirectTo: '/crisis-center', pathMatch: 'full' }, { path: 'crisis-center', component: CrisisCenterComponent, children: [ { path: '', component: CrisisListComponent, children: [ { path: ':id', component: CrisisDetailComponent, }, { path: '', component: CrisisCenterHomeComponent } ] } ] } ]; @NgModule({ imports: [ RouterModule.forChild(crisisCenterRoutes) ], exports: [ RouterModule ] }) export class CrisisCenterRoutingModule { }

重定向路由

添加一個redirect路由，它會把初始的相對URL（”）悄悄翻譯成默認路徑(/crisis-center)。

{ path: '', redirectTo: '/crisis-center', pathMatch: 'full' },

路由守衛

簡介

路由守衛，應用在這個路由不是對所有導航都有效的，是有一些前置條件的，只有當這些前置條件滿足的時候，才能被導航到該頁面。