next传递参数的时候出现的递归问题
本来想做一个测试,写了一个简单的登录注册,想着判断一下登录的token之后做一个路由跳转,但是在router.beforeEach((to,from,next)=>{next()})是可以正常跳转的,但是只要next传递参数的时候就会出现如下的错误:
router.beforeEach((to,from,next)=>{
next('/reg')
})
RangeError: Maximum call stack size exceeded
大概查了一下,栈溢出了,然后我就在想自己在哪儿用过相关的递归,本以为自己用了require.context()来动态读取路由模块导致的问题,但是在我改成普通的import导入的时候,出现了同样的问题。
后来就去查了一下Vuerouter的文档,是这么说的
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。**当前的导航被中断,然后进行一个新的导航。**你可以向 next 传递任意位置对象,且允许设置诸如 replace: true、name: ‘home’ 之类在这里插入代码片
的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
意思是如果路由跳转的时候next传递参数,他会中断正在执行的路由,然后又重新走一遍,然后又要经过全局的导航守卫,从而导致无线调用而栈溢出。
so解决的办法就是判断一下
router.beforeEach((to,from,next)=>{
let{path}=to;
if(path=="/reg"){
next()
}else{
next('/reg')
}
})