在项目开发过程中,有些逻辑需要使用到路由守卫,例如未登录情况下强制跳转到登陆页面、路由重定向
一、路由导航种类
1、全局前置守卫 beforeEach
2、全局后置守卫 afterEach
3、路由独享守卫 beforeEnter //用的较多
4、组件进入守卫 beforeRouteEnter //用的较多
5、组件更新守卫 beforeRouteUpdate
6、组件离开守卫 beforeRouteLeave
二、路由具体使用方法
1、全局前置守卫beforeEach
const router = new VueRouter({ ... })
// to进入时的路由信息对象
router.beforeEach((to, from, next) => {
if(符合条件){
//使用next()跳转到指定路由
}else{
//使用next()跳转到指定路由
}
})
2、全局后置守卫afterEach
与beforeEach相似
router.afterEach((to, from) => {
// ...
})
3、路由独享守卫beforeEnter
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
if(符合条件){
//使用next()跳转到指定路由
}else{
//使用next()跳转到指定路由
}
}
}
]
})
4、组件内的守卫
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 此处组件实例还没被创建,无法使用this关键字,但可以通过to(路由信息对象)
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}