vue路由报错Maximum call stack size exceeded

router.beforeEach((to, from, next) => {
  NProgress.start();
  const query = to.query.token
  //请求地址带token
  if (query) {
    sessionStorage.setItem("token", query)
    next()
  }
  if (to.path === '/login') {
    console.log(111);
    next()
  }
  const token = sessionStorage.getItem("token")
  // 不加to.path!=="login"会导致内存溢出,
  if (!token && to.path !== '/login') {
    console.log(222);
    next('/login')
  }
  // 其他的都放行
  next()
})
router.afterEach(() => {
  NProgress.done();
});

因为if判断里的条件只要满足都会执行，而执行顺序是从上而下。所以，如果第3个判断不加to.path!==“login”，那么默认会先打印222，并跳登录，当匹配到跳登录时，打印111，并跳转，同时下面的没有token的判断也会执行，打印222，并跳转。。。这样就循环往复，进入了死循环，导致超过最大调用堆栈大小。

router.beforeEach((to, from, next) => {
 const token = sessionStorage.getItem('token')
 // 存在 token 说明已经登录
 if (token) {
   // 登录过就不能访问登录界面，需要中断这一次路由守卫，执行下一次路由守卫，并且下一次守卫的to是主页'
   if (to.path === '/login') {
     next({ path: '/' })
   }
   // 保存在store中路由不为空则放行 (如果执行了刷新操作，则 store 里的路由为空，此时需要重新添加路由)
   if (store.getters.routeList.length ) {
     //放行
     next()
   } else {
     // 将路由添加到 store 中，用来标记已添加动态路由
     store.commit('ADD_ROUTER', '需要添加的路由')
     router.addRoutes('需要添加的路由')
     // 如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由
     next({ ...to, replace: true })
   }
 } else {
   // 未登录时，注意 ：在这里也许你的项目不只有 logon 不需要登录 ，register 等其他不需要登录的页面也需要处理
   if (to.path !== '/login') {
     next({ path: '/login' })
   } else {
     next()
   }
 }