[@vue/cli & element-ui] vue-router——導航守衛：組件內守衛

vue-router提供了導航守衛功能，其中包括全局導航守衛、路由獨享導航守衛和組件內守衛三種。這裏咱們主要談談組件內守衛的相關內容。

1.組件內守衛書寫與分類

組件內守衛在路由組件內部直接定義便可。
其中包括三種守衛：

前置守衛：beforeRouteEnter
更新守衛：beforeRouteUpdate
後置守衛：beforeRouteLeave

...

<script>
export default {
    data(){
        ...
    },
    methods: {
        ...
    },
    ...
    beforeRouteEnter(to, from, next){
        ...
    },
    beforeRouteUpdate(to, from, next){
        ...
    },
    beforeRouteLeave(to, from, next){
        ...
    }
}
</script>

...

守衛的三個參數：
to：Route對象實例，路由即將進入的目標。
from：Route對象實例，當前即將離開的路由對象。
next：Function，用來resolve守衛，效果根據傳參不一樣而不一樣。

• 無參數：直接執行管道內下一個守衛；
• false：中斷導航，若是URL已經發生變化，則重置爲from的URL；
• URL：跳轉到新的路由；
• Error對象實例：終止導航，並將錯誤傳遞給router.onError()中註冊的回調；
• Function：回調函數，僅在前置守衛支持回調函數。

2. 前置守衛

因爲在執行守衛以前，組件實例還未建立，所以在該守衛中，不可以使用this來獲取組件實例。
若是須要使用this來獲取組件實例處理邏輯，則應該在next中增長回調函數進行處理，回調函數的參數即爲組件實例。

beforeRouteEnter(to, from, next){
    next(vm => {
        //在這裏vm即咱們熟知的this
        ...
    })
}

3.更新守衛

僅當路由的參數發生變化時調用。因爲在這種狀況下，須要渲染的組件相同，所以組件實例被複用。因爲是複用組件，所以不會觸發路由的前置、後置守衛。在這種狀況下，用於監聽頁面變化，功能上代替前置守衛的即beforeRouteUpdate。
在該守衛中，能夠直接使用this獲取組件實例。

beforeRouteUpdate(to, from, next){
    //可使用this
    next();
    //可使用this
}

4.後置守衛

顧名思義，在路由即將離開之際被調用。一樣可使用this獲取組件實例。

beforeRouteLeave(to, from, next){
    //可使用this
    next();
    //可使用this
}

5.幾個注意點

前邊根據文檔大概介紹了一下組件內導航守衛。這裏把在實踐中遇到的幾個問題、容易犯錯的地方說一說。

5.1

只能在前置守衛的next函數中設置參數回調！

5.2

任何一個守衛中都必須執行next()來resolve守衛！不然路由過程就會中斷！
開始讀文檔的時候，沒有認真讀完，只是針對要使用的地方大體看了一眼。文檔中提到在更新守衛和後置守衛中，已經能夠直接使用this來獲取組件實例，沒有必要也不支持給next傳遞迴調。這裏我在beforeRouteUpdate中想固然的就把next也直接幹掉了（犯2），結果發現執行路由的時候，頁面參數一直不變。實際上是由於沒有執行next致使路由中斷。
所以，若是在路由組件不變只改變參數的路由中，發現url的參數一直不按照預想的發生變化，看一看是否是更新守衛中沒有執行next！

5.3

更新守衛中，使用this.$route.params來獲取路由參數，在next執行以前時，拿到的是from路由的參數（舊頁面），在next執行以後，拿到的是to路由的參數（新頁面）。

OVER。