Vue 導航守衛

全局守衛

• 每次路由跳轉都會被觸發

router.beforeEach((to, from, next) => {
    //全局前置守衛，當一個導航觸發時，全局前置守衛按照建立順序調用
    //數據校驗時，很是有用if(to.fullpath==="/home"){next('/login')}
    console.log("全局---------------------")
    console.log("beforeEach", to, from)
    next()
})

router.beforeResolve((to, from, next) => {
    //全局解析守衛，2.5.0新增，這和router.beforeEach相似，區別是再導航被確認以前，同時在全部組件內守衛和異步路由組件被解析以後，解析守衛就被調用
    console.log("全局---------------------")
    console.log("beforeResolve", to, from)
    next()
})
router.afterEach((to, from) => {
    //全局後置鉤子
    console.log("全局---------------------")
    console.log("afterEach")
})
複製代碼

路由獨享的守衛

• 寫在路由配置裏

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
        path: "/",
        redirect: "/a"
    }, {
        path: "/a/:id",
        //路由獨享的守衛
        beforeEnter: (to, from, next) => {
            console.log("路由---------------------")
            console.log('before enter');
            next()
        },
        component: pageA
    }, {
        path: "/b",
        component: pageB
    }]
})
複製代碼

組件內的守衛

在路由組件內直接定義一下路由導航守衛

beforeRouteEnter (to, from, next) {
        // 在渲染改組件的對應路由被confirm前調用
        //不能獲取組件實例this
        //由於當守衛執行前，組件實例還沒被建立
        console.log("組件---------------------")
        console.log(this,"beforeRouteEnter");
        next()
    },
    beforeRouteUpdate(to, from, next) {
        //在當前路由改變，可是改組件被複用時調用
        //舉例來講，對於一個帶有動態參數的路徑 /a/:id,在/a/1和/a/2之間跳轉的時候，
        //因爲會渲染一樣的pageA組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用
        //能夠訪問組件實例 this
        console.log("組件---------------------")
        console.log(this,"beforeRouterUpdate")
        next()
    },
    beforeRouteLeave (to, from, next) {
        //導航離開改組件的對應路由時調用
        //能夠訪問組件實例 this
        //一般用來禁止用戶在還未保存修改前忽然離開。該導航能夠經過next（false）來取消
        console.log("組件---------------------")
        console.log(this,"beforeRouteLeave")
        next()
    }
複製代碼

總結：

1. 導航被觸發
2. 調用全局的beforeEach守衛
3. 在重用的組件裏調用beforeRouteUpdate守衛
4. 在路由配置裏調用beforeEnter
5. 在被激活的組件裏調用beforeRouteEnter
6. 調用全局的beforeResolve守衛
7. 導航被確認
8. 調用全局的afterEach鉤子
9. 觸發DOM更新