如何纠正，超出最大调用堆栈大小，vue-router？

Question

美好的一天。 我有以下错误：

[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)

根据错误，它在我的路线文件中，我有以下方式：

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;

当我在停车场视图时出现问题，然后当我登录时，它不会将我重定向到 vita 登录，但它给了我该错误并保持在同一视图中，尽管它确实关闭了 firebase会议。如果我在任何其他视图中，例如车辆、配置文件或主视图，然后我在结束会话中给出不会产生错误。

会话结束代码如下：

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

Answer 1

根据vue路由器的docs：

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

它通常用于重定向到 404 页面而不是另一个路由。在您的情况下，您正在调用一个新路由 /login 并且它也在 * 中匹配，这会导致循环和 Maximum call stack size exceeded。

Answer 2

您的next 处理程序中有多个拼写错误。这些调用接受一个路由名称，如果你传递一个不存在的路由名称，它的行为是未指定的。

据我所知，您正在尝试重定向到login，而您实际上调用了路由Login

Answer 3

这也发生在我身上。 因此，经过我的调查，我发现如果您使用的是 Vuejs v. 2.*，则必须使用 v. 2.* 的 vue-router（不是版本 3）。

请看下面的例子：

package.json:

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

路由器.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;