vue-router 遇到無窮循環 route

  1. vue-router 遇到無窮循環 route
    1. 源起
    2. 錯誤訊息
    3. 搜尋關鍵字
    4. 發生原因

vue-router 遇到無窮循環 route

源起

錯誤訊息並不是指向自己的程式碼
而是指向框架的錯誤

所以，算是一個不直覺處理的 bug

錯誤訊息

截圖

文字

webpack-internal:///./node_modules/regenerator-runtime/runtime.js:288

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Generator.invoke [as _invoke] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:288)
    at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
    at step (webpack-internal:///./node_modules/babel-runtime/helpers/asyncToGenerator.js:17)
    at eval (webpack-internal:///./node_modules/babel-runtime/helpers/asyncToGenerator.js:35)
    at new Promise (<anonymous>)
    at new F (webpack-internal:///./node_modules/core-js/library/modules/_export.js:36)
    at eval (webpack-internal:///./node_modules/babel-runtime/helpers/asyncToGenerator.js:14)
    at eval (webpack-internal:///./src/router/index.js:204)
    at iterator (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1943)
    at step (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1717)

搜尋關鍵字

這兩條關鍵字一起搜尋

Uncaught (in promise) RangeError: Maximum call stack size exceeded
at step (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:1717)

發生原因

同時使用 redirect 和 beforEach 時[1] ，beforeEach 的條件沒有設定好，造成無窮 router

下面的例子的執行順序

  1. 程式會先執行 beforeEach 將程式導回 / ，觸發 hash change
  2. 再執行 routes 裡的 redirect 將頁面重新引導到 /Index ，觸發 beforeEach 回到 1.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var route = new Router({
  routes: [
    {
      path: '/',
      redirect: '/Index',
    },
    {
      path: '/Index',
      name: 'Index',
      component: Index,
    },
    //...
  ]
})

route.beforeEach(async (to, from, next) => {
  if (from.name === null &&
      to.name !== 'Login' &&
      (route.app.$store === undefined ||
       route.app.$store.getters.token.length === 0)) {
         route.push('/')
    }
  //...
}

  1. Vue-router：Uncaught RangeError：超出最大調用堆棧大小 ↩︎

發表於 
tags:
  • { vue }
  • { vue-router }