一、什麼是路由
個人理解，路由就是從一個頁面跳轉到另一個頁面。

二、在路由時傳遞資料
在路由時傳遞資料有三種方式

• 一在查詢引數中傳遞資料

/product?id=1&name=2  => ActivatedRoute.queryParams[id]

1.app.component.html 中寫一個引數進行傳參

2.頁面展示，點選商品詳情，位址列出現 ？id=1，這就是剛剛我給它傳的參。

3.product.component.ts 接收傳入進來的引數id

4.product.component.html

5.頁面展示，下面顯示商品ID為1，在第二步，只是位址列顯示id

- 二在路由路徑中傳遞資料

{path:/product/:id} => /product/1 => ActivatedRoute.Params[id]

- 三在路由配置中傳遞資料

{path:/product,component:ProductComponent,data:[{isProd:true}]} => ActivatedRoute.data[0][isProd]

三、重定向路由
在使用者訪問一個特定的地址時，將其重定向到另一個制定的地址。

www.aaa.com => www.aaa.com/products
www.aaa.com/x => www.aaa
 
.com/y  //x——y

四、子路由

{path:'home',component:HomeComponent}

{path:'home',component:HomeComponent,
    children:[
        {
            path:'',component:XxxComponent,
        },
        {
            path:'/yyy' component:YyyComponent
        }
        ]
}

五、輔助路由

<router-outlet></router-outlet
 
>
<router-outlet name="aux"></router-outlet>

{path: 'xxx',component:XxxComponent,outlet:"aux"}
{path: 'yyy',component:YyyComponent,outlet:"aux"}

<a [routerLink]= "['/home' ,{outlets:{aux: 'xxx'}}]">Xxx</a>
<a [routerLink]= "['/product' ,{outlets:{aux: 'yyy'}}]">Yyy</a>

案例整體思路
在app元件的模板上再定義一個插座來顯示聊天慢板
單獨開發一個聊天室元件，只顯示在新定義的插座上
通過路由引數控制新插座是否顯示聊天面板

六、路由守衛

在那些場景下使用者可以進入路由及離開路由：
只有當用戶已經登入並擁有某些許可權時才能進入某些路由。
一個由多個表單元件組成的嚮導，例如註冊流程，使用者只有在當前路由的元件中填寫了滿足需求的資訊才可以導航到下一個路由。
當用戶未執行儲存操作而試圖離開當前導航時提醒使用者。

路由守衛有三種情況：
CanActivate:處理導航到某路由的情況
CanDeactivate:處理從當前路由離開的情況
Resolve:在路由啟用之前獲取路由資料

總結
專案中多實踐吧！