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去实践.