路由守衛

顧名思義就是只能在路由註冊 XD 當你進入任何一個路由之前，都會觸發。
看起來 和 beforeEach 功能好像一樣，實際上兩者差別在於 : beforeEnter 可依routes 的規則來決定是否要註冊。

beforeEnter

const routes = [
{
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from) => {
         return false;
    }
}
]

元件守衛

元件守衛的用法跟我們使用生命週期相當相似。

data(){
    return{
        ...
    }
},
beforeRouteEnter(to,from){
    // ...
},
beforeRouteUpdate(to,from){
    // ...
},
beforeRouteLeave(to,from){
    // ...
},

beforeRouteEnter

一如它的名字，是在路由進入元件之前會被觸發。但需要注意的是 : 因為在 beforeRouteEnter 時，元件的實體還沒被建立，因此不能使用 this。但我們可以透過 next 來取得元件實體。

beforeRouteEnter (to, from, next) {
        // 還沒有元件實體
    next(vm => {
        // 取的到元件實體
    });
}

beforeRouteUpdate

當元件還是同一個，但路由被改變時會觸發。如 : /test/1 跳轉到 /test/2。
如果在同個元件中用到動態路由時，就可以用這個 hook 來換內容 ~

beforeRouteUpdate(to, from) {
    //...
}

beforeRouteLeave

當你要離開這個元件的路由時，就會被觸發。

beforeRouteLeave (to, from) {
    const ask = window.confirm("確定要離開嗎")
    if (!ask){
        // 如果選擇為否，就可以拒絕使用者的離開跳轉，繼續留在這裡。
        return false;
    }
}

參考文章:
4-4 路由守衛
不只懂 Vue 語法：試解釋如何使用導航守衛？