RangeError: Maximum call stack size exceeded,Vue路由无限循环跳转。

项目场景:

业务是根据打开的环境进行不同的操作,一下就是想到用Vue导航守卫来做,每次进入路由的时候都会根据环境做不同的操作。

问题描述:

一开始是这么写的,手快咔咔就一顿操作哈哈哈,相关业务代码就码上了哈。
RangeError: Maximum call stack size exceeded,Vue路由无限循环跳转。_第1张图片
但是这时候就进了死循环了哈哈哈

RangeError: Maximum call stack size exceeded,Vue路由无限循环跳转。_第2张图片

原因分析:

在走else的时候,使用next({path:'/404'})跳转到404页面,但是在跳转之前就触发了beforeEach导航守卫,然后又走了else,导致每次在路由跳转之前都被守卫拦截下来进行下次跳转,如此反复,调用栈就溢出了。其实看到无限输出的“·····环境检测·····”,也应该知道是进了死循环了。

解决方案:

实际上在next({path:'/404'})的时候,守卫里的to.path就变成了"/404",所以可以根据to.path == "/404"来判断是直接next(),还是需要next({path:'/404'})
修改后的代码如下,问题解决:
RangeError: Maximum call stack size exceeded,Vue路由无限循环跳转。_第3张图片

你可能感兴趣的:(记录,html5,vue.js)