1，引入路由
import { RouterModule, Routes } from '@angular/router';
2，路由路徑
1，每個 Route 都會把一個 URL 的 path 映射到一個組件。 注意，path 不能以斜槓（/）開頭。 路由器會爲解析和構建最終的 URL，這樣當你在應用的多個視圖之間導航時，可以任意使用相對路徑和絕對路徑。
{ path: 'crisis-center', component: CrisisListComponent },
2，路由中的 :id 是一個路由參數的令牌(Token)。比如 /hero/42 這個 URL 中，“42”就是 id 參數的值。 此 URL 對應的 HeroDetailComponent 組件將據此查找和展現 id 爲 42 的英雄。
{ path: 'hero/:id', component: HeroDetailComponent },
3，路由中的 data 屬性用來存放於每個具體路由有關的任意信息。該數據可以被任何一個激活路由訪問，並能用來保存諸如 頁標題、麪包屑以及其它靜態只讀數據。
{
path: 'heroes',
component: HeroListComponent,
data: { title: 'Heroes List' }
},
4，路由中的空路徑（’’）表示應用的默認路徑，當 URL 爲空時就會訪問那裏，因此它通常會作爲起點。 這個默認路由會重定向到 URL /heroes，並顯示 HeroesListComponent。
{ path: '',
redirectTo: '/heroes',
pathMatch: 'full'
},
5，路由中的 ** 路徑是一個通配符。當所請求的 URL 不匹配前面定義的路由表中的任何路徑時，路由器就會選擇此路由。 這個特性可用於顯示“404 - Not Found”頁，或自動重定向到其它路由。
{ path: '**', component: PageNotFoundComponent }
3，路由出口
RouterOutlet 是一個來自路由模塊中的指令，它的用法類似於組件。 它扮演一個佔位符的角色，用於在模板中標出一個位置，路由器將會把要顯示在這個出口處的組件顯示在這裏。
<router-outlet></router-outlet>
4，路由連接，激活
<nav>
<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
a 標籤上的 RouterLink 指令讓路由器得以控制這個 a 元素。 這裏的導航路徑是固定的，因此可以把一個字符串賦給 routerLink（“一次性”綁定）。
如果需要更加動態的導航路徑，那就把它綁定到一個返回鏈接參數數組的模板表達式。 路由器會把這個數組解析成完整的 URL。
路由鏈接的激活狀態
RouterLinkActive 指令會基於當前的 RouterState 爲活動的 RouterLink 切換所綁定的 css 類。
在每個 A 標籤上，你會看到一個到 RouterLinkActive 的屬性綁定，形如 routerLinkActive="…"。
等號右邊的模板表達式包含一些用空格分隔的 CSS 類名，當這個鏈接激活時，路由器將會把它們加上去（並在處於非活動狀態時移除）。你還可以把 RouterLinkActive 設置爲一個類組成的字符串，如 [routerLinkActive]="‘active fluffy’"，或把它綁定到一個返回類似字符串的組件屬性。
路由鏈接的激活狀態會向下級聯到路由樹中的每個層級，所以，父子路由鏈接可能會同時激活。要覆蓋這種行爲，可以把 [routerLinkActiveOptions] 綁定爲 { exact: true } 表達式，這樣 RouterLink 只有當 URL 與當前 URL 精確匹配時纔會激活。
路由器狀態
在導航時的每個生命週期成功完成時，路由器會構建出一個 ActivatedRoute 組成的樹，它表示路由器的當前狀態。 你可以在應用中的任何地方用 Router 服務及其 routerState 屬性來訪問當前的 RouterState 值。
RouterState 中的每個 ActivatedRoute 都提供了從任意激活路由開始向上或向下遍歷路由樹的一種方式，以獲得關於父、子、兄弟路由的信息。