页面重载时将非/路由重定向到根路径出现无限循环如何解决

问题原因 #

你的代码触发无限循环的核心原因是没有对to.path === '/'的场景做放行处理：

• 当执行next('/')触发重定向时，会再次进入beforeEach守卫，此时新的路由目标就是/，会命中你代码的else分支，再次执行next('/')，由此形成无限循环。
• 另外你原来的判断条件也不符合重载场景的需求：页面刷新/重载时，from.path的初始值并不是/，原有逻辑根本覆盖不到重载跳转的要求。

修复方案 #

按照你的需求调整逻辑，优先放行根路径访问，再判断重载场景：

router.beforeEach((to, from, next) => {
  // 访问目标已经是根路径，直接放行，解决无限循环
  if (to.path === '/') {
    return next()
  }
  // from.matched长度为0代表没有上一级路由记录，属于页面重载/首次加载
  if (from.matched.length === 0) {
    return next('/')
  }
  // 正常路由跳转场景，已登录则放行
  if (store.state.loggedIn) {
    return next()
  }
  // 其余未覆盖场景统一跳转根路径
  next('/')
})

逻辑说明 #

• 首先拦截所有去往根路径的请求直接放行，从根源避免重复触发重定向导致的死循环
• 通过from.matched.length === 0判断是否为页面重载/首次打开场景，所有重载时访问非根路径的请求都重定向到根路径，匹配你的业务需求
• 保留你原有逻辑里的登录态判断，正常路由跳转时只要已登录就可以访问其他路由

内容的提问来源于stack exchange，提问作者Berco Beute