在前幾天的內容中有提到，透過使用<router-link>加上 to 屬性可以建立路由連結，取代傳統的 <a> 標籤，今天的內容將探討 <router-link>的其他功能以及導航守衛（Navigation Guards）。

RouterLink

主要功用是建立路由連結。

• to 屬性

  透過加上 to 屬性來指定路徑。

• replace 屬性

  透過加上 replace 屬性，使得頁面跳轉時不會在瀏覽器留下歷史紀錄。

補充：

透過使用 router.push( ) 和 router.replace( ) 操作路由，也可以達到和上述相同的效果。

接下來要介紹導航守衛（Navigation Guards）是什麼？

導航守衛就像是路由的守門員，透過跳轉或取消導航的方式來保護路由，並且可以在 callback 函式裡執行其他動作，又可以分為全域、路由、元件三種不同的 Hook 函式，此外每個守衛方法都會接收兩個參數：

• to: 即將進入的路由
• from: 目前正要離開的路由

1. 全域守衛

表示掌管 router「全域」的守衛。

• beforeEach

  使用 router.beforeEach( ) 註冊 Hook 函式，可以在其 callback 函式裡寫入身分驗證，會在進入路由之前調用。

• beforeResolve

  使用 router.beforeResolve( )註冊 Hook 函式，與 router.beforeEach( ) 功能類似，但被調用時間較晚，會在所有元件內守衛和非同步路由元件被解析之後、路由被確認之前調用。

• router.afterEach

  使用 router.afterEach( ) 註冊 Hook 函式，在路由跳轉結束後調用。

2. 路由守衛

在 router 物件內註冊 Hook 函式。

• beforeEnter

  與 beforeEach 功能相似，只是可以根據 routers 的規則決定是否要註冊 Hook 函式。

3. 元件守衛

在單一元件內註冊 Hook 函式。

• beforeRouteEnter

  beforeRouteEnter 在路由進入元件之前調用，此時元件的實體尚未被建立，所以還無法訪問 this。

• beforeRouteUpdate

  beforeRouteUpdate 在路由被更新但對應的元件實體為同一個時被調用，例如：路徑在 /users/1 和 /users/2 之間跳轉的時候，此時已可以透過 this 訪問元件的實體。

• beforeRouteLeave

  beforeRouteLeave 在路由離開元件時調用。

總結：導航守衛執行的順序

當路由跳轉時，Hook 函式執行的順序

以下取自官方文件的內容
1.導航被觸發。
2.在失活的元件裡呼叫beforeRouteLeave守衛。
3.調用全域的beforeEach守衛。
4.在重複使用的元件裡呼叫beforeRouteUpdate守衛(2.2+)。
5.在路由配置裡呼叫beforeEnter。
6.解析異步路由組件。
7.在被啟動的元件裡調用beforeRouteEnter。
8.呼叫全域的beforeResolve守衛(2.5+)。
9.導航被確認。
10.調用全域的afterEach鉤子。
11.觸發DOM 更新。
12.呼叫beforeRouteEnter守衛中傳給next的回呼函數，建立好的元件實例會作為回呼函數的參數傳入。

參考資源

https://book.vue.tw/CH4/4-2-route-settings.html
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
https://ithelp.ithome.com.tw/articles/10276947
https://docs-99.vercel.app/Vue/navigation-guards.html