How to correct, Maximum call stack size exceeded, vue-router?

Question

Good day. I have the following error:

[vue-router] uncaught error during route navigation:
vue-router.esm.js:1897 RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at resolvePath (vue-router.esm.js:597)
    at normalizeLocation (vue-router.esm.js:1297)
    at Object.match (vue-router.esm.js:1341)
    at VueRouter.match (vue-router.esm.js:2461)
    at HashHistory.transitionTo (vue-router.esm.js:1865)
    at HashHistory.push (vue-router.esm.js:2267)
    at eval (vue-router.esm.js:1952)
    at router.beforeEach (index.js:116)
    at iterator (vue-router.esm.js:1935)

According to the error it is in my file of routes, which I have it in the following way:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import Vehiculos from '../components/Vehiculos'
import Perfil from '../components/Perfil'
import Login from '../components/Login'
import TutorialIntroduccion from '../components/TutorialIntroduccion'
import Politicas from '../components/Politicas'
import Parqueo from '../components/Parqueo'
import Politicas from '../components/Politicas'
import Historial from '../components/Historial'
import firebase from 'firebase'

Vue.use(Router)

let tutorialVisto = localStorage.getItem("Tutorial");

const router = new Router({
  routes: [
   {
    path: '*',
    redirect: '/login'

   },
   {
    path: '/',
    redirect: '/tutorial'
   },
   {
    path: '/tutorial',
    name: 'tutorial',
    component: TutorialIntroduccion,
    meta: {
      tutorialVisto: tutorialVisto,
      autentificado: false
    },
    beforeEnter: (to, from, next) => {
      let tutorialVisto = to.matched.some(record=>record.meta.tutorialVisto);
      if (tutorialVisto)next('login');
      else next();
    }
   },
   {
      path: '/login',
      name: 'Login',
      component: Login
   },
   {
      path: '/home',
      name: 'home',
      component: Home,
      meta: {
        autentificado: true
      }
    },
    {
      path: '/parqueo/:id',
      name: 'parqueo',
      component: Parqueo,
      meta: {
        autentificado: true
      }
    },
    {
      path: '/vehiculos',
      name: 'vehiculos',
      component: Vehiculos,
      meta: {
        autentificado: true
      }
    },
    {
      path: '/perfil',
      name: 'perfil',
      component: Perfil,
      meta: {
        autentificado: true
      }
    },
    {
      path: '/politicas',
      name: 'politicas',
      component: Politicas,
      meta: {
        autentificado: true
      },
    },
    {
        path: '/historial',
        name: 'historial',
        component: Historial,
        meta:{
          autentificado: true
        }
    }
  ]
})
router.beforeEach((to, from, next) => {
  let usuario = firebase.auth().currentUser; //Debe ser otra Promesa si esta autenticado o no.
  let autorizacion = to.matched.some(record=>record.meta.autentificado);
  let tutorialVisto = to.matched.some(record=>record.meta.tutorialVisto);
  if (autorizacion && !usuario) {
    next('login');
  }
  else if (!autorizacion && usuario) {
    next('home');
  } 
  else{
    next();
  }   
})
export default router;

The problem arises when I am in the parking lot view and then when I log in, it does not redirect me to the vita login, but it gives me that error and stays in the same view, although it does close the firebase session. If I am in any of the other views, for example, vehicles, profile or main and then I give in closing session does not generate me error.

The session closing code is the following:

linkto(pathname) {
            this.$router.push({ path: pathname })
            if(pathname=="/login") {
                firebase.auth().signOut().then(() => this.$router.replace('login'))
            }
        },

Answer 1

It happened to me too. So after my investigation I have found if you are using Vuejs v. 2.* you have to use the vue-router of v. 2.* (not version 3).

Please see the following examaple:

package.json:

"dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^2.8.1"

router.ts:

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import { Component } from "vue-router/types/router";
import Home from "@/views/Home.vue";
import NotFound from "@/views/NotFound.vue";
import MyPage from "@/views/MyPage.vue";

Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
    {
        path: "/",
        name: "Home",
        component: Home as Component
    },
    {
        path: "/my-page",
        name: "MyPage",
        component: MyPage as Component
    },
    {
        // will match everything else
        path: '*',
        name: "NotFound",
        component: NotFound as Component
    }
];

const router = new VueRouter({
    mode: "history",
    routes
});

export default router;

Answer 2

You have multiple spelling mistakes in your next handlers. These calls accept the name of a route, and if you pass it a name of an route that does not exists, it will behave unspecified.

From what I can see is that you are trying to redirect to login, while you actually called the route Login

Answer 3

According to vue router's docs:

{
  // will match everything
  path: '*'
}

It is usually used to redirect to a 404 page not another route. In your case, you are calling a new route /login and it matches in * as well, which causes the loop and the Maximum call stack size exceeded.