摘要：要做到這一點，有三個必不可少的步驟，分別是創建根路由模塊定義路由配置添加指令標簽。下面的代碼以路由配置為參數，通過調用方法來創建根路由模塊，并將其導入到應用的根模塊中。

路由所要解決的核心問題就是通過建立URL和頁面的對應關系，使得不同的頁面可以用不同的URL來表示。

Angular路由的核心工作流程圖

首先，當用戶在瀏覽器上輸入URL后，Angular將獲取該URL并將其解析生成一個UrlTree實例

其次，在路由配置中尋找并激活與UrlTree實例匹配的配置項

再次，為配置項中指定的組件創建實例

最后，將該組件渲染于路由組件的模板中指令所在的位置

Angular路由最為基本的用法是將一個URL所對應的組件在頁面中顯示出來。要做到這一點，有三個必不可少的步驟，分別是創建根路由模塊、定義路由配置、添加指令標簽。

根路由模塊包含了路由所需要的各項服務，是路由工作流程得以正常執行的基礎。

下面的代碼以路由配置rootRouterConfig為參數，通過調用RouterModule.forRoot()方法來創建根路由模塊，并將其導入到應用的根模塊AppModule中。

app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: "add",
    component: AddComponent,
  },
  {
    path: "list",
    component: ListComponent,
  },
  {
    path: "",
    redirectTo: "add",
    pathMatch: "full",
  },
  {
    path: "**",
    redirectTo: "add",
    pathMatch: "full",
  }
];

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

path 不能以斜杠 / 開頭

** 通配符路由，不滿足以上路徑時，選擇此路由

http://localhost:4200/#/add

HashLocationStrategy是Angular路由最為常見的策略，其原理是利用了瀏覽器在處理hash部分的特性

瀏覽器向服務器發送請求時不會帶上hash部分的內容，更換URL的hash部分不會向服務器重新發送請求，這使得在進行跳轉的時候不會引發頁面的刷新和應用的重新加載

使用該策略，只需要在注入路由服務時使用useHash屬性進行顯示指定即可

app-routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(rootRouterConfig, { useHash: true })],
  exports: [RouterModule]
})

Web應用中的頁面跳轉，指的是應用響應某個事件，從一個頁面跳轉到另一個頁面的行為。對于Angular構建的單頁面而言，頁面跳轉實質上就是從一個配置項跳轉到另一個配置項的行為。

指令跳轉通過使用RouterLink指令來完成，該指令接收一個鏈接參數數組，Angular將根據該數組生成UrlTree實例進行跳轉

add
list

第一個參數名可以使用 /、./ 或 ../ 前綴

如果第一個片段用 / 開頭，則路由器會從應用的根路由開始查找

如果第一個片段用 ./ 開頭或者沒有用斜杠開頭，路由器就會從當前激活路由開始查找

如果第一個片段以 ../ 開頭，則路由器將會向上找一級

RouterLink指令可以被應用到任何HTML元素上，使得頁面跳轉不需要依賴超鏈接。

RouterLink指令通過響應click事件實現頁面跳轉，如果需要響應其他事件或者根據運行時動態跳轉，則可以通過Router.navigateByUrl或Router.navigate來完成。

add() {
    this.router.navigateByUrl("/add");
}

list() {
    this.router.navigate(["/list"]);
}

Path參數通過解析URL的path部分來獲取參數。

在定義一個配置項的path屬性時，可以使用/字符來對path屬性進行分段，如果一個分段以:字符開頭，則URL中與該分段進行匹配的部分將作為參數傳遞給組件中。

app-routing.module.ts

const rootRouterConfig: Routes = [
  {
    path: "add/:id/:name/:age/:sex",
    component: DetailComponent,
  }
];

detail 1 tao1 30 man

在組件中獲取Path參數，需要導入ActivatedRoute服務，該服務提供了兩種方式處理頁面之間的跳轉。

Angular應用從一個頁面跳轉到另一個新的頁面，實質就是從一個配置項跳轉到另一個配置項。在這個過程中，Angular除了會為配置項所對應的組件創建實例外，還會為該配置項創建一個ActivatedRoute實例來表示該配置項已被激活，該ActivatedRoute實例包含一個快照(snapshot)，記錄了從當前URL解析出來的所有path參數。

ngOnInit() {
    console.log(this.activatedRouter.snapshot.params);
  }

{id: "1", name: "tao", age: "30", sex: "man"}

Angular在處理同一頁面時，不會重現創建組件的實例，所以構造函數和ngOnInit()方法不會被調用。雖然Angular會將快照中參數更新，但是沒有將值更新到組件。為了解決這個問題，ActivatedRoute服務提供了一個Observable對象，允許對參數的更新進行訂閱。組件銷毀的時候要取消訂閱。

this.activatedRouter.params.subscribe(value => {
      console.log(value)；
})

ngOnDestroy() {
    this.sub.unsubscribe();
}

由于URL的query部分不用和配置項進行匹配，因此每一個配置項可以擁有任意多個查詢參數。

http://localhost:4200/list?limit=10

Query參數同樣可以通過RouterLink指令或者跳轉方法來賦值

>detail limit 10
>detail limit 30

Query參數的獲取，需要借助ActivatedRoute服務提供的Observable對象的queryParams來完成。

this.sub2 = this.activatedRouter.queryParams.subscribe(value => {
      console.log(value);
    })

// {limit: "10"}