Vue-Router路由钩子函数(导航守卫)
@Vue-Router路由钩子函数(导航守卫)Vue-Router路由钩子函数(导航守卫)路由钩子函数有三种:1:全局钩子: beforeEach、 afterEach2:单个路由里面的钩子:beforeEnter、 beforeLeave3:组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave全局守卫router.beforeEac
@Vue-Router路由钩子函数(导航守卫)
Vue-Router路由钩子函数(导航守卫)
路由钩子函数有三种:
1:全局钩子: beforeEach、 afterEach
2:单个路由里面的钩子: beforeEnter、 beforeLeave
3:组件路由:beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave
全局守卫
router.beforeEach() 进入之前触发
router.afterEach() 进入之后触发
每个守卫方法接收三个参数:
①to: Route: 即将要进入的目标路由对象(to是一个对象,是将要进入的路由对象,可以用to.path调用路由对象中的属性)
②from: Route: 当前导航正要离开的路由
③next: Function: 这是一个必须需要调用的方法,执行效果依赖 next 方法的调用参数。
beforeEach(全局前置守卫)
使用 router.beforeEach 注册一个全局前置守卫
afterEach(全局后置钩子)
和守卫不同的是, afterEach不会接受 next 函数也不会改变导航本身
路由独享的守卫(单个路由独享的)
写在路由配置中,只有访问到这个路径,才能触发钩子函数
组件级路由钩子
写在组件中,访问路径,即将渲染组件的时候触发的
{
data,
methods
beforeRouteEnter(){
this 不指向实例 组件还没创建
next((vm) =>{
vm就是实例
})
}
beforeRouteUpdate(){}
beforeRouteLeave(){}
}
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
离开守卫beforeRouteLeave()通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
更多推荐
所有评论(0)