VueJS "RangeError: Maximum call stack size exceeded"

Question

Please help me to fix this

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"
}]

and

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();
  }
});

When I open pages/login the error doesn't happen. But when I open pages/signup, it's always an error.

This is the error in the console:

"RangeError: Maximum call stack size exceeded"

Dan · Accepted Answer · 2020-04-16 10:54:53Z

5

This will cause an infinite loop:

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

It's redirecting to the same route it's already going to, which causes the beforeEach to run again, and then triggers another redirect on the next iteration. Change that to:

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

answered Apr 16, 2020 at 10:54

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

resitdc Over a year ago

wow this works, i got more understanding. very helpful, thank you very much

Collectives™ on Stack Overflow

VueJS "RangeError: Maximum call stack size exceeded"

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related