vue router Maximum call stack size exceeded

这个错误通常是由于路由配置中的无限循环或递归调用导致的。可以检查路由配置是否存在这样的问题。

另外，还可以尝试增加调用栈大小的限制，例如：

// 增加调用栈大小限制为 10000
Vue.config.devtools = true
Vue.config.performance = true
Vue.config.maxRecursiveUpdates = 10000

vue路由 Maximum call stack size exceeded

解决 Vue 路由导致的最大调用栈大小超出问题

当在 Vue 项目中配置路由并尝试通过 beforeEach 导航守卫实现基于登录状态的页面跳转时，可能会遇到死循环的情况。这通常是因为导航逻辑不当造成的无限重定向。

对于给定的代码片段：

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

const token = store.getters.getToken;

router.beforeEach((to, from, next) => {
    if (!token) {
        next({ name: 'error' })
    }
    // 有权限
    next()
})

上述代码存在潜在的风险，在某些情况下会触发死循环。具体来说，如果用户未登录 (!token) 并试图访问受保护路径，则会被强制转向到名为 'error' 的路由；然而，一旦到达该目标位置后再次执行相同的检查条件，由于此时仍然处于未认证的状态(!token)，就会重复同样的操作形成闭环[^2]。

为了避免这种情况的发生，可以采取以下措施改进现有逻辑:

改进后的解决方案

引入排除列表机制来阻止不必要的多次重定向行为。以下是优化过的版本：

// 定义不需要验证令牌即可访问的白名单路径数组
const excludePath = ['login', 'register', 'error'];

router.beforeEach((to, from, next) => {
    const isTokenPresent = !!store.getters.getToken;
    
    // 如果不存在有效令牌且当前要前往的位置不在免检范围内，则重定向至错误页
    if (!isTokenPresent &amp;&amp; !excludePath.includes(to.name)) {
        return next({ name: 'error' });
    }

    // 对于已授权请求或属于豁免范围内的链接允许正常通行
    next();
});

此方法确保即使没有有效的身份验证信息也不会陷入无休止地重新加载同一页面的过程之中。同时保持了原有功能——即只有经过适当鉴权才能进入特定区域的要求不变。

另外值得注意的是，除了调整前端路由控制外，还应考虑服务端的安全策略以及合理的 session 管理方式以增强整个系统的健壮性和安全性。