【背景】

最近在學習Angular，迫不及待的想把學習到的內容跟大家分享。

【內容】

1.實現一個簡單的路由

（1）使用angular-cli建立一個帶路由的專案

ng new 專案名稱 --routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    children: []
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }
 

2.簡要介紹路由的五個物件

Routes

必備:path,component

這裡的path不要加/,為了能夠靈活運用絕對路徑和相對路徑

萬用字元**，一般放在最後面，作為沒匹配到特殊路由的預設路由。

匹配順序：先匹配者優先

const routes : Routes = [
      {path: 'page1',component:Page1Component},
      {path: 'page2',component:Page2Component},
      
    ];

RouterLink（指令），用於模板中跳轉路由

路由加/,說明是跟路由

路由加./，說明是子路由

input
    <a routerLink="/dashboard" routerLinkActive="active">儀表盤</a>  
    <a routerLink="/heroes" routerLinkActive="active">英雄列表</a> 
input type="button" value="英雄列表" （click）="toProductDetails()" >
<router-outlet></router-outlet>
 

注意，錨標籤中的[routerLink]繫結。我們把RouterLink指令（ROUTER_DIRECTIVES中的另一個指令）繫結到一個字串。 它將告訴路由器，當用戶點選這個連結時，應該導航到哪裡。

Router

在模板中如下寫

<a routerLink="/dashboard" routerLinkActive="active">儀表盤</a>  
 <a routerLink="/heroes" routerLinkActive="active">英雄列表</a>  
<input type="button" value="英雄列表" (click)="toProductDetails()">
 <router-outlet></router-outlet>  
 

constructor(private router:Router){
}

toProductDetails(){
    this.router.navigate(['/product']);
}

ActivatedRoute

在路由中傳遞資料時就用到了ActivatedRoute物件

（1）在查詢引數中傳遞資料

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

（2）在路由路徑中傳遞資料

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

（3）在路由配置中傳遞資料 

3.新增404頁面

如果使用者輸入的url地址不正確，或者輸入的地址不存在跳轉到指定的路徑,使用”**”去匹配，路由會先從上面匹配，如果匹配不成功就會往下匹配

const routes : Routes = [
      {path: 'page1',component:Page1Component},
      {path: 'page2',component:Page2Component},
      {path: '**',component:Page404Component},
    ];

【感受】

以上介紹的內容僅僅是淺顯的入門知識，要想深入的學習還是得多敲例子。多讀書，多總結。