vue路由当中的导航钩子中关于next这个方法的描述应该如何理解?

clipboard.png
1、vue的官方文档中关于next的描述有这样一句。应该如何理解这句话?
2、是不是next不传参就不会改变路由路径,传参则根据所传参数进行路径改变?

阅读 4.8k
2 个回答

之前写的一篇文章,里面有具体demo作解释,参考一下vue.js路由vue-router(二)——路由进阶

在这里我用通俗点的说法解释上next(),next(false),next('/'),next(error),希望通过这接地气的解释你能掌握这几个知识点。
背景:你乘坐汽车从A景区想赶往B景区(模拟路由A跳转到路由B)
1.next()

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

2.next(false)

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

3.next('/')

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

4.next(error)

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

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

1.next()不传参的情况下,进行管道中的下一个钩子,意思是针对路由的钩子可能有多个,比如每个路由都可能有钩子函数beforeEnter,那么会执行完这些钩子函数之后再调整到to参数指定的页面
2.不传参不会改变路径,传参就按照指定的参数进行跳转

推荐问题
宣传栏