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更新