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

Question

请帮我解决这个问题

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: 超出最大调用堆栈大小”

Answer 1

这会导致无限循环：

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

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

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