title: VueJS "RangeError: Maximum call stack size exceeded"
body: <p>Please help me to fix this</p>
  
  <p><em>router.js</em></p>
  
  <pre><code>routes: [{
    path: "",
    component: () =&gt; import("@/layouts/full-page/FullPage.vue"),
    children: [{
      path: "/pages/login",
      name: "page-login",
      component: () =&gt; import("@/views/pages/Login.vue")
    }, {
      path: "/pages/signup",
      name: "page-signup",
      component: () =&gt; import("@/views/pages/Signup.vue")
    }, {
      path: "/pages/error-404",
      name: "page-error-404",
      component: () =&gt; import("@/views/pages/Error404.vue")
    }]
  }, {
    path: "*",
    redirect: "/pages/error-404"
  }]
  </code></pre>
  
  <p>and</p>
  
  <pre><code>router.beforeEach((to, from, next) =&gt; {
    if (to.path != "/pages/login") {
      if (auth.isAuthenticated()) {
        next();
      } else {
        if(to.path == "/pages/signup") {
          next("/pages/signup");
        }else{
          next("/pages/login");
        }
      }
    } else {
      next();
    }
  });
  </code></pre>
  
  <p>When I open <strong>pages/login</strong> the error doesn't happen. But when I open <strong>pages/signup</strong>, it's always an error.</p>
  
  <p>This is the error in the console:</p>
  
  <blockquote>
    <p><strong>"RangeError: Maximum call stack size exceeded"</strong></p>
  </blockquote>