vue-router 导航守卫 next(‘/login‘) 无法调转问题

vue-router跳转遇到 RangeError: Maximum call stack size exceeded 错误

问题代码：

// 设置导航守卫 有token 直接进入首页或指定的页面（无法进入登录页面）
router.beforeEach((to, from, next) => {
// 获取token
  const TOKEN = getToken()
  if (TOKEN) {
    if (to.name === 'Login') next('/home')
    else next()
  } else {
    // 没有token 只能访问登录页面 其它页面无法访问
    next('/login')
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

按照理想状态 当没有token时页面应直接跳转到 login 页面

实际：

通过打印输出语句发现：

页面进入的死循环

查找资料将代码修改后：

// 设置导航守卫 有token 直接进入首页或指定的页面（无法进入登录页面）
router.beforeEach((to, from, next) => {
// 获取token
  const TOKEN = getToken()
  if (TOKEN) {
    if (to.name === 'Login') next('/home')
    else next()
  } else {
    // 没有token 只能访问登录页面 其它页面无法访问
   if (to.name === 'Login') next()
    else next('/login')
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

运行

页面成功跳转