昨天我們完成了上圖的路由設定與換頁效果，所以 Angular 的路由機制到底做了什麼呢？

還記得我們昨天有在 app-routing.module.ts 做了以下設定嗎？

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  }
];

這些主要是在設定路由。

當瀏覽器的 URL 有變動的時，Angular 的路由機制會從這裡找找看有沒有相對應的路由設定，進而顯示相對應的 Component。

不過目前這樣子的設定其實不太夠，只要輸入我們沒有設定的路由路徑，畫面都會變成空白的，因為 Angular 的路由機制找不到可以配置的 Component。

所以通常我們都還會再加上兩個路由的設定，其中一個路由是：

{ 
  path: '',
  component: HomeComponent
}

這個路由的設定我通常會稱其為預設路由，就像如果我們在瀏覽器的網址列輸入iT邦幫忙的網址 https://ithelp.ithome.com.tw/ 之後，iT邦幫忙會顯示出「技術問答」頁，然後如果我們輸入 https://ithelp.ithome.com.tw/questions 之後，也是出現「技術問答」頁的意思一樣。

另外一個路由則是：

{
  path: '**', 
  redirectTo: 'home', 
  pathMatch: 'full'
}

這個路由狀態的設定我通常會稱其為萬用路由或是轉向路由。

萬用的意思是因為 path: '**'，是指不管是什麼樣的路徑都會符合這個路由設定的意思；而轉向則是因因為 redirectTo 的關係，使這個路由設定具有重新導向的功能。

而 redirectTo: 'home' 則是說其將當前這個路徑改回 home 並重新導向過去的意思。

至於 pathMatch 則是因為只要我們有使用 redirectTo 這個屬性的話，就必須要一併加入 pathMatch 這個屬性的設定，不然系統會拋出錯誤。

不過轉向路由最多只能轉向一次，不能從 / 轉到 /home 之後再轉到 /about 。

特別要注意的是，路由是有順序性的，因為 Angular 的路由機制在比對路由的時候，是從頭一個一個比對的。如果其中有兩個同樣 path 的路由，會顯示的一定是放在比較前面的那個。而萬用路由則是一定要放在最後一個，不然你會發現在它後面的路由怎樣都不會出現。

那 Angular 的路由機制怎麼知道我們要切換的 Component 的位置呢？

Angular 的路由機制靠的是我們放在 Template 裡的路由插座 - <router-outlet></router-outlet> 。

路由插座有點像是定位點的概念，我們只要把我們需要切換顯示的區塊裡放入這個路由插座，Angular 的路由機制就會將找到的路由設定裡要顯示的 Component 插入，進而達成換頁的效果。

至於超連結的部份，則是在 a 標籤上加上 [routerLink] 的屬性，就像我們昨天做的那樣：

<ul>
  <li><a [routerLink]="'/home'">Home</a></li>
  <li><a [routerLink]="'/about'">About</a></li>
</ul>

或是：

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

值得一提的是，如果是使用 [routerLink] 的話，其實是可以指定陣列給它的，像是：

<ul>
  <li><a [routerLink]="['/home']">Home</a></li>
  <li><a [routerLink]="['/about']">About</a></li>
</ul>

有時候，我們會在當前頁面的連結上，會加上指定的類別以套用特殊的樣式讓使用者知道現在在哪一頁，這時候我們還可以另外加上 [routerLinkActive] ， Angular 的路由機制會自動幫我們加上該類別。像是：

<ul>

  <li>
    <a 
      routerLink="/home"
      routerLinkActive="active"
    >
      Home
    </a>
  </li>
  
  <li>
    <a 
      routerLink="/about"
      routerLinkActive="active"
    >
      About
    </a>
  </li>
  
</ul>

並且在 app.component.css 裡加上樣式的設定：

.active {
  background-color: red;
}

畫面就會變成：

今天就先到這邊，我們明天見！