vue-router路由守卫

const router = new VueRouter({…})

全局前置守卫 ========当一个导航被触发时,全局守卫按照顺序调用

router.beforeEach((to,from,next)=>{

})
to 即将要进入的目标/路由对象
from 当前当行正要离开的路由
next()进行管道中的下一个钩子

全局后置守钩子

router.afterEach((to,from)=>{

})

全局解析守卫====在导航被确认之前,同时所有组件内的守卫和异步路由被解析之后

router.beforeResolve(()=>{

})

路由独享的守卫====可以在路由配置上直接定义

const router = new VueRouter({
routes: [
{
path: ‘/foo’,
component: Foo,
beforeEnter: (to, from, next) => {
// …
}
}
]
})
router.beforeEnter((to,from ,next)=>{

})

组件内的守卫====可以在路由组件被直接定义

beforeRouterEnter(to,from,next){
// 当前守卫执行前,组件实例还没有创建
// 不能获取组件实例的this
}
beforeRouterUpdate(to,from,next){
// 在当前理由改变,组件被复用时调用
// 可以访问组件实例this
}
beforeRouterLeave(to,from,next){
//导航离开该组件时被调用
// 可以访问组件实例this
}

你可能感兴趣的:(vue)