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

在路由守卫中有三个参数；

beforeEach((to, from, next) => {
	to // 要去的路由
	from // 当前路由
	next() // 放行的意思
}

其实在路由守卫中，只有next()是放行，其他的诸如：next('/logon') 、 next(to) 或者 next({ ...to, replace: true })都不是放行，而是：中断当前导航，执行新的导航

背景：你乘坐汽车从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()里的回调）

很赞哦！ (0)