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。*（不是版本3）的vue-router。

请参阅以下示例：

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;

如何纠正Vue路由器超出最大呼叫堆栈大小的问题？

3 个答案: