Question

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

2019-03-21

6340

vue.js vue-router

您好。我遇到了以下错误：

[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 router 的文档：

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

它通常用于重定向到 404 页面，而不是其他路由。在您的例子中，您正在调用新路由 /login ，并且它也匹配 * ，这会导致循环和 超出最大调用堆栈大小 。

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;