導(dǎo)航是很簡單的，只是不同頁面之間的切換，路由是實(shí)現(xiàn)導(dǎo)航的一種。

一個url對應(yīng)的一個頁面，在angular2中是一個組件。定義一個規(guī)則。

基礎(chǔ)知識

大多數(shù)帶路由的應(yīng)用都要在index.html的標(biāo)簽下先添加一個元素，來告訴路由器該如何合成導(dǎo)航用的URL。

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

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

一個路由配置

path中不能用斜線/開頭。

這些路由的定義順序是故意如此設(shè)計的。 路由器使用先匹配者優(yōu)先的策略來匹配路由，所以，具體路由應(yīng)該放在通用路由的前面。在上面的配置中，帶靜態(tài)路徑的路由被放在了前面，后面是空路徑路由，因此它會作為默認(rèn)路由。而通配符路由被放在最后面，這是因?yàn)樗亲钔ㄓ玫穆酚桑瑧?yīng)該只在前面找不到其它能匹配的路由時才匹配它。

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

RouterOutlet - 路由插座

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

路由模塊

最開始的路由，我們是直接寫在app.module.ts文件中的，像這樣，我們可以實(shí)現(xiàn)簡單的導(dǎo)航。

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 {}

但是這樣不方便，所以我們要進(jìn)行路由的分離，重構(gòu)成我們自己的路由模塊。like this: