Vue-router路由守卫的钩子和使用场景

vue-router中存在三个钩子，也叫hook，生命周期，守卫等。

1、全局守卫

2、路由独享守卫

3、组件独享守卫

 

全局守卫：页面加载时候触发，一般控制全局权限

const router = new VueRouter();
// 全局前置守卫
router.beforeEach((to, from, next) => {
    ...
    next(); //所有前置守卫最后都需要调用next()进入下一个管道
})

// 全局后置守卫，没有next
router.afterEach((to, from) => {
    ...
})

// 全局前置解析守卫，和router.beforeEach类似，在所有组件内守卫以及异步路由组件解析完后触发
router.beforeResolve((to, from, next) => {
    ...
    next();
})

 

路由独享守卫：它是在route文件中使用，参数和全局守卫一样

// beforeEnter和afterEnter
const router = new VueRouter({
    routes: [
        path: '/',
        component: Demo,
        beforeEnter: (to, from, next) => {
            ...
            next();
        },
        afterEnter: (to, from, next) => {
            ...
            next();
        }
    ]
})

 

组件独享守卫：它是在index.vue文件中使用，参数和全局守卫一样

const Demo = {
    template: `...`,
    // beforeRouteEnter是拿不到当前组件的this，组件还没被创建，需要通过next(vm => {})回传
    beforeRouteEnter (to, from, next) {
        ...
        next();
    },
    // 当前路由改变并且该组件得到复用是调用，如/demo/:id,在/demo/1切换/demo/2，demo被复用，会触发。
    beforeRouteUpdate (to, from, next) {
        ...
        next();
    }，
    beforeRouteLeave (to, from, next) {
        ...
        next();
    }
}

 

使用场景：

1、路由进入前最典型的可以做一些权限控制，路由离开时可以清除或存储一些信息/任务等。

2、前置守卫不能拿到当前组件的this，可以通过next的参数进行回传this。

3、前置守卫必须调用next()方法，否则不会进入下一个管道。