接續昨天的路由主題，我們來完善一下程式碼。

在 import module 的地方加入{ enableTracing: true }，Angular 就會在 console 印出路由的訊息，debug時可以用。

// app-routing.module.ts

imports: [RouterModule.forRoot(routes, { enableTracing: true })]

routerLink 屬性

到 navigation-bar.component.html，將 href 改成 Angular 提供的 routerLink，注意 Link 的 L 要大寫：

// navigation-bar.component.html

<ul>
  <li><a routerLink="home">Home</a></li>

  <ng-container *ngIf="!islogin">
    <li><a routerLink="/register">Register</a></li>
    <li><a routerLink="/login">Login</a></li>
  </ng-container>

  <ng-container *ngIf="islogin">
    <li><a routerLink="/chart">Chart</a></li>
    <li><a routerLink="/logout">Logout</a></li>
  </ng-container>
  
</ul>

由於我們的架構比較簡單，所以目前沒有將路由加上變數來呈現頁面的需求，但使用 routerLink 的話，其實有這樣的做法：

routerLink="['/login']"

看起來沒甚麼，就只是用中括號括住而已。那我們再動一點手腳：

routerLink="['/account', 'login']"

這樣的話這個超連結就會導向/account/login。

所以說下面這些寫法效果是一樣的：

routerLink="/account/login"
routerLink="['/account', 'login']"
routerLink="['/account/login']"

那看起來好像也沒甚麼嘛，但 routerLink 還可以搭配 Property Binding 使用：

[routerLink]="['/account', 'login', id , 'info']"

這邊的 id 是設定在 ts 裡的變數，假設 id 是 5 ，那麼路由位址就會解析成 /account/login/5/info。

所以透過這樣的方式，我們就可以將變數夾入URL，更靈活的操作路由位址。

定義 routes 時要注意的事情

再來，我們回到 app-routing.module.ts，來看一下定義 routes 時，需要注意哪些事情。

首先，path 的地方不能用 / 開頭，否則一定會報錯。

再來，redirectTo 只能重導向一次，如果像我下面這樣寫，想從根目錄重導向到 home，再自動導向 login ，是不可行的。

const routes: Routes = [

  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', redirectTo: 'login' },
  { path: 'login', component: LoginComponent },

];

redirectTo 只會幫你重導向一次而已。

萬用路由 **

然後我們可以在 routes 最後加入 { path: '**', component: <COMPONENT> } 這樣的規則，這被稱為萬用路由，即是說，輸入的所有 URL 都可以匹配 **。

那麼把它放在規則的最後，就是當我設定的所有 path 都不能匹配時，就一定會匹配到 ** 這個萬用路由。

那這裡就可以放一個 Component 來處理不存在的頁面，比如說： 404 頁面不存在 ...等等。概念類似 switch-case 裡的 default:。

children 子路由

整個網頁通常不會只有一層路由，你的網頁 url 可能會有好幾層，就像前面舉例的 /account/login/5/info 一樣。那麼 route 可以定義 children 這個屬性，children 它也是一個 Route 陣列，寫法就跟 routes 一樣，定義好幾組 Route 在裡面，然後裡面的每一組 Route 又可以再串下一組 children，這樣就可以分好幾層，見下面的範例：

const routes: Routes = [
{ 
    path: 'account', children: [
        { path: 'register', component: RegisterComponent},
        { path: 'changepassword', component: ChangePasswordComponent},
    ]
  }
]

這樣就會有 account/register、account/changepassword 兩個路由，當然還可以往後面繼續串下去。