Vue Router如何通过导航守卫保留上一页的Query参数？

问题分析 #

• 方案1中to.query是只读属性，无法直接修改，因此抛出"query is read-only"错误。
• 方案2触发无限循环的原因是：每次调用next(newUrl)都会重新触发beforeEach守卫，且未设置终止条件，导致循环调用导航逻辑。

正确实现方式 #

添加判断条件避免重复触发导航，同时完成参数自动携带：

1. 排除初始进入页面的场景（比如刷新页面，此时from.name为null）
2. 检查目标路由是否已包含来源路由的所有Query参数，避免重复拼接

router.beforeEach((to, from, next) => {
  // 初始进入页面（刷新）或来源路由无Query参数时，直接放行
  if (!from.name || Object.keys(from.query).length === 0) {
    return next();
  }

  // 校验目标路由是否已携带所有来源的Query参数
  const hasAllQuery = Object.keys(from.query).every(key => {
    return to.query[key] === from.query[key];
  });

  if (hasAllQuery) {
    // 已携带全部参数，直接放行
    next();
  } else {
    // 拼接新Query：保留目标路由原有参数，覆盖并补充来源路由的参数
    const newQuery = { ...from.query, ...to.query };
    // 用replace: true避免浏览器历史生成重复记录
    next({ ...to, query: newQuery, replace: true });
  }
});

关键说明 #

• 通过from.name判断初始导航，避免页面刷新时错误拼接参数
• hasAllQuery校验逻辑解决了无限循环的核心问题
• replace: true优化浏览器历史记录，避免冗余导航条目

内容的提问来源于stack exchange，提问作者Natthapol Maneechote