Vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫分为:全局守卫、路由独享守卫、组件内守卫。
一、全局守卫
全局守卫的语法:
let router = new VueRouter({
routes: [//配置性
{…}
]
})
全局守卫又分为全局前置守卫和全局后置守卫
1.全局前置守卫
可以使用router.beforeEach 注册一个全局前置守卫,其语法为:
router.beforeEach((to, from, next) => {
…….拦截操作
next();
// next(false);
})
该守卫可接收三个参数:
(1)to:Route表示即将要进入的目标路由对象
(2)from:Router当前导航正要离开的路由
(3)next:function表示执行效果依赖next方法的调用参数
next()表示进入管道的下一个钩子,类似于迭代器中的next(),若全部钩子执行完毕后,导航的状态为confirmed(确认的),前置守卫有拦截操作,所以需要调用next方法执行。
next(false)表示中断当前导航
2.全局后置守卫
router.afterEach((to, from) => {
…….之后操作
})
该守卫可接收两个参数:
(1)to:Route表示即将要进入的目标路由对象
(2)from:Router当前导航正要离开的路由
它不会接受next()函数也不会改变导航本身
二、路由独享守卫
可以在路由配置上直接定义 beforeEnter 守卫。
let router = new VueRouter({
routes: [
{
path: ‘/a’,
component: com1,
beforeEnter(to, from, next) {
…….拦截操作
next();
}
}
]
})
该守卫于全局前置守卫的方法的参数一样
三、组件内守卫
组件内守卫顾名思义就是在组件内进行守卫操作,其可进行的守卫操作有:
1.beforeRouteEnter表示进入组件之前进行拦截
beforeRouteEnter(to, from, next) {
…….拦截操作
next();
},
beforeRouteEnter这个守卫操作要注意的是不能使用this,是因为在进入路由之前,组件还未创建,因此得不到this属性。
2. beforeRouteUpdate表示在当前组件中,路由发生改变时触发
beforeRouteUpdate(to, from, next) {
…….拦截操作
next();
},
3.beforeRouteLeave表示离开组件之前触发
beforeRouteLeave(to, from, next) {
…….拦截操作
next();
}
beforeRouteLeave(离开守卫)通常用来禁止用户在还未保存修改前突然离开。该导航可访问this属性并且可以通过 next(false) 来取消。