點選右上方紅色按鈕關注“程式碼開發”，每天都進步一點！

問題：vue-router有哪幾種導航鉤子（ 導航守衛 ）？

1、全域性守衛： router.beforeEach

2、全域性解析守衛： router.beforeResolve

3、全域性後置鉤子： router.afterEach

4、路由獨享的守衛： beforeEnter

5、元件內的守衛： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

導航表示路由正在發生改變，vue-router 提供的導航守衛主要用來：透過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全域性的， 單個路由獨享的， 或者元件級的。

注意：

引數或查詢的改變並不會觸發進入/離開的導航守衛。

你可以透過 觀察 $route 物件 來應對這些變化，或使用 beforeRouteUpdate的元件內守衛。

1、全域性守衛：

使用 router。beforeEach 註冊一個全域性前置守衛：

const router = new VueRouter（{ 。。。 }） router。beforeEach（（to， from， next） => { // 。。。}）

當一個導航觸發時，全域性前置守衛按照建立順序呼叫。守衛是非同步解析執行，此時導航在所有守衛 resolve 完之前一直處於等待中。

每個守衛方法接收三個引數：

to： Route： 即將要進入的目標 路由物件

from： Route： 當前導航正要離開的路由

next： Function： 一定要呼叫該方法來resolve這個鉤子。執行效果依賴 next 方法的呼叫引數。

next（）： 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是confirmed （確認的）。

next（false）： 中斷當前的導航。如果瀏覽器的 URL 改變了 （可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from 路由對應的地址。

next（‘/’） 或者 next（{ path： ‘/’ }）： 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。你可以向 next 傳遞任意位置物件，且允許設定諸如 replace： true、name： ‘home’ 之類的選項以及任何用在router-link的 to prop或 router。push中的選項。

next（error）： （2。4。0+） 如果傳入 next 的引數是一個 Error 例項，則導航會被終止且該錯誤會被傳遞給 router。onError（）註冊過的回撥。

確保要呼叫 next方法，否則鉤子就不會被 resolved。

2、全域性解析守衛：

2。5。0 新增

在 2。5。0+ 你可以用 router。beforeResolve 註冊一個全域性守衛。這和 router。beforeEach 類似，區別是：在導航被確認之前，同時在所有元件內守衛和非同步路由元件被解析之後，解析守衛就被呼叫。

3、全域性後置鉤子

你也可以註冊全域性後置鉤子，然而和守衛不同的是，這些鉤子不會接受 next 函式也不會改變導航本身：

router。afterEach（（to， from） => { // 。。。}）

4、路由獨享的守衛

你可以在路由配置上直接定義 beforeEnter 守衛：

const router = new VueRouter（{ routes： ［ { path： ‘/foo’， component： Foo， beforeEnter： （to， from， next） => { // 。。。 } } ］}）

這些守衛與全域性前置守衛的方法引數是一樣的。

5、元件內的守衛

最後，你可以在路由元件內直接定義以下路由導航守衛：

beforeRouteEnter

beforeRouteUpdate （2。2 新增）

beforeRouteLeave

const Foo = { template： `。。。`， beforeRouteEnter （to， from， next） { // 在渲染該元件的對應路由被 confirm 前呼叫 // 不！能！獲取元件例項 `this` // 因為當守衛執行前，元件例項還沒被建立 }， //不過，你可以透過傳一個回撥給 next來訪問元件例項。 //在導航被確認的時候執行回撥，並且把元件例項作為回撥方法的引數。 beforeRouteEnter （to， from， next） { next（vm => { // 透過 `vm` 訪問元件例項 }） }， beforeRouteUpdate （to， from， next） { // 在當前路由改變，但是該元件被複用時呼叫 // 舉例來說，對於一個帶有動態引數的路徑 /foo/：id，在 /foo/1 和 /foo/2 之間跳轉的時候， // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。 // 可以訪問元件例項 `this` }， beforeRouteLeave （to， from， next） { // 導航離開該元件的對應路由時呼叫 // 可以訪問元件例項 `this` }}

注意：

beforeRouteEnter 是支援給next 傳遞迴調的唯一守衛。對於beforeRouteUpdate 和 beforeRouteLeave 來說，this 已經可用了，所以不支援傳遞迴調，因為沒有必要了：

beforeRouteUpdate （to， from， next） { // just use `this` this。name = to。params。name next（）}

離開守衛beforeRouteLeave：通常用來禁止使用者在還未儲存修改前突然離開。該導航可以透過 next（false） 來取消：

beforeRouteLeave （to， from ， next） { const answer = window。confirm（‘Do you really want to leave？ you have unsaved changes！’） if （answer） { next（） } else { next（false） }}