VueJS“RangeError：超出最大调用堆栈大小”

Posted 2023-02-22

【中文标题】VueJS“RangeError：超出最大调用堆栈大小”

【英文标题】：VueJS "RangeError: Maximum call stack size exceeded"

【发布时间】：2020-07-29 13:59:52

【问题描述】：

请帮我解决这个问题

router.js

routes: [
  path: "",
  component: () => import("@/layouts/full-page/FullPage.vue"),
  children: [
    path: "/pages/login",
    name: "page-login",
    component: () => import("@/views/pages/Login.vue")
  , 
    path: "/pages/signup",
    name: "page-signup",
    component: () => import("@/views/pages/Signup.vue")
  , 
    path: "/pages/error-404",
    name: "page-error-404",
    component: () => import("@/views/pages/Error404.vue")
  ]
, 
  path: "*",
  redirect: "/pages/error-404"
]

和

router.beforeEach((to, from, next) => 
  if (to.path != "/pages/login") 
    if (auth.isAuthenticated()) 
      next();
     else 
      if(to.path == "/pages/signup") 
        next("/pages/signup");
      else
        next("/pages/login");
      
    
   else 
    next();
  
);

当我打开 pages/login 时，不会发生错误。但是当我打开 pages/signup 时，总是出错。

这是控制台中的错误：

“RangeError: 超出最大调用堆栈大小”

【参考方案1】：

这会导致无限循环：

if(to.path == "/pages/signup") 
        next("/pages/signup");

它正在重定向到它已经去的同一条路线，这导致beforeEach 再次运行，然后在下一次迭代中触发另一个重定向。将其更改为：

if(to.path == "/pages/signup") 
        next();

【讨论】：

哇这工作，我得到了更多的理解。很有帮助，非常感谢