vue路由守卫中next方法的理解

vue路由守卫中next方法的理解

在网上看到了一篇通俗易懂的文章,此文章出处
在这里我用通俗点的说法解释上next(),next(false),next(’/’),next(error),希望通过这接地气的解释你能掌握这几个知识点。

背景:你乘坐汽车从A景区想赶往B景区(模拟路由A跳转到路由B)
1.next()

next():进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的)。

你乘坐汽车要从A景区到B景区,路过关卡时,守门人拦下你,你量出了next(),守门人一看没问题,赶紧放行,于是你顺利到达了B景区。

2.next(false)

next( false )中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。

如果你量出了next(false),守门人立马关住大门,不让你走,哪都不让你去,你说想换个交通方式,走路或者坐飞机,都不行,老实待在A景区吧

3.next(’/’)

next( ’ / ‘)或者next({ paht:’ / ’ }):跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。可传递的参数可以是router-link标签中的to属性参数或router.push中的选项

你原本打算从A景区到B景区,但是走到关卡的时候由于某些原因改变了主意,想要去C景区,你对守门员量出了next({path:’/C’}),守门员一看,哦,原来你不去B了,要去C啊,去吧去吧,然后你顺利到达了C景区

4.next(error)

next( error ):如果传入next的参数是一个Error实例,则导航会被终止且该错误会被传递给router.onError()注册过的回调。

你在出发之前,给你妈妈说,妈,要是有什么事我立马通知你,你记得查看消息啊(你注册了router.onError())走到中途,出现了意外,你发出next(error),然后你妈就收到了消息,赶紧打电话问你怎么了(执行router.onError()里的回调)

最重要的是自己要吃透文档,如果一遍不懂再看一遍,再不懂就自己写demo去实践.

你可能感兴趣的:(vue)