轉向路由

說明

1. 可將某個路由名稱傳向到另外一個有設定路由的頁面
2. 路由設定物件中的pathMatch: "full"屬性不可少

程式語法：

{
  path: '',
  redirectTo: "/path",
  pathMatch: "full"
}

程式碼範例：

1.將app-routing.module.ts內的路由設定變更為如下：

const routes: Routes = [
  {
    path: '',
    redirectTo: "/pageA",
    pathMatch: "full"
  },
  {
    path: 'pageA',
    component: PageAComponent
  },
  {
    path: 'pageB',
    component: PageBComponent
  }
];

2.在瀏覽器網址列輸入localhost:4200測試轉向效果，此時網址會被導向localhost:4200/pageA

3.注意這時候來去page-a的連結背景顏色不會變，檢查app.component.html內超連結設定如下：

<ul>
  <li><a [routerLink]="['/']" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">來去page-a</a></li>
  <li><a routerLink="/pageB" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">來去page-b</a></li>
</ul>

4.上述連結沒有變色的原因，在於設定的路由是'/'，也就是localhost:4200，並且加上了[routerLinkActiveOptions]="{exact: true}"來避免套用到上層連結。但此時localhost:4200，會被轉向到localhost:4200/pageA，所以路由比對認為不是相同路由，就沒有啟動樣式。

5.將app.component.html內超連結設定變更為如下：

<ul>
  <li><a [routerLink]="['/pageA']" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">來去page-a</a></li>
  <li><a routerLink="/pageB" routerLinkActive="activeStyle" [routerLinkActiveOptions]="{exact: true}">來去page-b</a></li>
</ul>

6.在瀏覽器網址列輸入localhost:4200測試轉向效果與超連結啟動效果