vue：导航守卫

vue中的导航守卫分为三种

1. 全局守卫
2. 路由独享
3. 组件内

1、全局守卫

一般放在main.js中

beforeEach

每一次进入路由，不管什么路由，都要守卫一次

router.beforeEach((to, from, next) => {
    console.log("beforeEach");
    next();
})

beforeResolve

当路由内部全都解析完成以后才去执行

router.beforeResolve((to, from, next) => {
    console.log("beforeResolve");
    next();
})

afterEach

所有内容全部解析完成以后执行

router.afterEach((to, from, next) => {
    console.log("afterEach");
})

2、路由独享

一般放在router的index.js中

beforeEnter

export default new VueRouter({
    mode: "history", // 配置成为历史模式
    linkExactActiveClass: "exact-avtive",
    linkActiveClass: "avtive",
    routes: [{
        path: '/home',
        name: 'Home',
        component: Home,
        beforeEnter(to, from, next) {
            console.log("beforeEnter");
            next();
        },
    }],
})

3、组件内

写在任意组件中

beforeRouteEnter

进入路由时执行

beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    next();
}

beforeRouteLeave

离开当前路由之前执行

beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    next();
}

beforeRouteUpdate

数据更新时执行

beforeRouteUpdate(to, from, next) {
    console.log("beforeRouteUpdate");
    next();
}

完整的导航解析流程

以上七个钩子函数全部写上之后，执行vue页面，输出如下

第一次导航解析的页面，7个钩子函数全部配置好了，但是第二个路由中，由于只配置了全局守卫，故只有3个输出。
基于此结果，不难发现完整的导航解析流程，如下

1. beforeEach（全局守卫） ↓
2. beforeEnter（路由独享守卫） ↓
3. beforeRouteEnter（组件内守卫） ↓
4. beforeResolve（全局守卫 - 解析） ↓
5. afterEach（全局守卫 - 解析完成） ↓
6. beforeRouteEnter（组件内守卫，传递next） ↓

• beforeRouteUpdate（组件内守卫，当数据更新时，）

从前往后，依次传递，依次解析。