关于vue的路由跳转之前和之后的一些守卫

原创 前端薇薇 随笔 工作 44阅读 18 天前 举报

1.全局守卫
router.beforeEach:注册一个全局前置守卫
const router = new VueRouter()
router.beforeEach(to,from,next)=>{}
当一个导航触发时,全局前置守卫按照创建顺序调用,守卫是异步解析执行的,而导航在所有守卫resolve完之前一直处于等待中。
其中有三个参数:
to:即将要进入的目标(路由对象)
from:当前导航正要离开的路由
next:function 一定要调用这个方法来resolve这个钩子,执行效果依赖next方法的调用参数
1)next():进行管道中的下一个钩子,若钩子全都执行完了,导航状态就是confirm(确认的)
2)next(false):中断当前导航,若浏览器的url改变了(eg:用户手动/back按钮),url地址会重置到from路由对应的地址
3)next('/')或next({path:'/'}):跳转到一个不同的地址,当前的导航被中断,进行新的导航
注:可以向next传递任意位置对象,且允许设置
eg:replace:true,name:'home'之类的选项和任何用在router-link的to prop或 router.push中的选项
4)next(error):若传入next参数是一个Error实例,导航会被终止且该错误会被传递给router.onError()注册过的回调
确保要调用next(),否则钩子不会被resolved

2.组件内的守卫
beforeRouterEnter
beforeRouterUpdate
beforeRouterLeave

1)beforeRouterEnter(to,from,next){
next(vm=>{})
}
调用时机:
在渲染这个组件的对应路由被confirm之前调用
不能获取到组件实例this(ps:守卫执行前,组件实例还没创建)
注意:
可以传一个回调给next访问组件实例,在导航被确认的时候执行回调,并把组件实例作为回调的参数。

2)beforeRouterUpdate(to,from,next){}
调用时机:在当前路由改变,但该组件被复用时调用
eg:对一个带有动态参数的路径之间跳转的时候,会渲染同样的Foo组件,组件实例会被调用,而这个钩子就是在这种情况下被调用,可以访问组件实例this

3)beforeRouterLeave(to,from,next){}
调用时机:导航离开该组件的对应路由时调用
可以访问组件实例的this
PS:离开守卫一般用来禁止用户在还没保存修改之前突然离开,该导航可以通过next(false)来取消。

PS:随手记录下,有不对的欢迎指正!

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复