关于 Vue 路由守卫中 next 的记录

330 阅读1分钟

接下来会用通俗点的说法解释路由守卫中三个参数其中之一的 next 参数next(),next(false),next('/'),next(error)

希望通过这接地气的解释能让自己和其他人理解

背景:你乘坐汽车从A地→B地(模拟路由A跳转到路由B)

next()

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

next(false)

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

next('/')

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

next(error)

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

参考来源