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();
  }
})