Vue中模块化路由之后,添加路由守卫beforeEach之后,next传递参数会陷入死循环的问题

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')
	}
})
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值