vue 報錯 RangeError: Maximum call stack size exceeded

npm run dev運行項目

RangeError: Maximum call stack size exceeded是死循環出現的語句

報錯信息

 

 

 源代碼

import Vue from 'vue'
import VueRouter from 'vue-router'
import SubModule1 from '../pages/sub-module1'

Vue.use(VueRouter)
import Login from './modules/login';

// 不需要角色權限控制的路由(所有有角色都可以訪問)
const staticRouteMap = [{
    path: '',
    redirect: '/sub-module1',
    meta: {
      hiddenInMenu: true,
    }
  },
  Login,
  {
    path: '/sub-module1',
    name: 'subModule1',
    component: SubModule1
  },
  {
    path: '/helloword',
    name: 'helloword',
    component: () => import('@/components/Nav/index.vue')
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test',
    name: 'test',
    component: () => import('../views/test.vue')
  }];
const createRouter = () => new VueRouter({
  routes: staticRouteMap
})

const router = createRouter();
router.beforeEach((to, from, next) =>{
  const token = localStorage.getItem('token');
  if(!token){
    console.log('123')
    next('/login');
  }else{
    next();
  }
  
})
export default router

 

一般vue-router報錯說明是路由配置出問題了，或者跳轉調用路由的時候出現死循環，

next('/login')時也觸發了beforeach

修改后代碼

主要是beforeEach修改排除的頁面

router.beforeEach((to, from, next) =>{
  const token = localStorage.getItem('token');
  //需要排除的頁面
  const outerPaths = ['/login']; if(!token && !outerPaths.includes(to.path)){
    next('/login');
  }else{
    next();
  }
})