Vue Router路由间传递查询参数时遇无限循环错误求助

问题原因 #

你的代码触发无限循环是因为每次调用next({path: to.path, query})都会触发新一轮的导航守卫执行，但你没有判断目标路由是否已经包含displayNav参数——不管目标路由有没有这个参数，守卫都会强制添加并发起新导航，导致循环往复。

修复方案 #

给守卫增加判断逻辑：只有当来源路由存在displayNav参数，且目标路由没有该参数时，才执行重定向；否则直接放行。

修正后的守卫代码 #

// guards.js
export const appendQueryParamsToRoute = (to, from, next) => {
  // 仅当来源路由有displayNav，且目标路由没有时，才添加参数
  if (from.query.displayNav && !to.query.displayNav) {
    // 复制目标路由的查询参数，保留原有参数的同时添加displayNav
    const updatedQuery = { ...to.query, displayNav: from.query.displayNav }
    next({ path: to.path, query: updatedQuery })
  } else {
    // 无需修改参数，直接放行
    next()
  }
}

关键优化点 #

• 新增!to.query.displayNav判断，避免重复触发导航，从根源解决无限循环
• 复用from.query.displayNav的原始值，而非硬编码'true'，支持参数值为'false'等其他情况
• 使用对象展开语法{ ...to.query }替代Object.assign，代码更简洁易读

进阶优化（可选） #

如果希望页面刷新后依然保留displayNav参数，可以把参数存入localStorage，避免依赖from路由的状态：

// 首次获取到displayNav时存入本地存储
router.afterEach((to) => {
  if (to.query.displayNav) {
    localStorage.setItem('displayNav', to.query.displayNav)
  }
})

// 修改守卫逻辑，优先读取本地存储的参数
export const appendQueryParamsToRoute = (to, from, next) => {
  const savedDisplayNav = localStorage.getItem('displayNav')
  if (savedDisplayNav && !to.query.displayNav) {
    const updatedQuery = { ...to.query, displayNav: savedDisplayNav }
    next({ path: to.path, query: updatedQuery })
  } else {
    next()
  }
}

内容的提问来源于stack exchange，提问作者Jay Joshi