Vue Router：利用beforeEach持久化userId查询参数及解决无限循环问题

我明白你想通过全局路由守卫自动传递userId查询参数，不用一个个修改router-link和router.push的烦恼——之前的代码触发无限循环其实是因为每次调用next()修改路由后，又会重新触发beforeEach守卫，陷入了死循环。咱们来一步步修正这个问题：

问题根源拆解 #

• 你之前的代码没有判断目标路由是否已经携带了userId，导致每次修改路由后都会再次触发守卫，无限重复这个过程；
• 另外Object.assign({}, to.query, from.query.userId)的写法有误：from.query.userId是一个参数值，不是对象，合并后会导致query结构异常。

修正后的代码实现 #

router.beforeEach((to, from, next) => {
  // 先获取来源路由的userId参数
  const userId = from.query.userId;
  
  if (userId) {
    // 只有当目标路由没有userId，或者userId和来源路由不一致时，才修改路由
    if (!to.query.userId || to.query.userId !== userId) {
      // 正确合并现有query和userId参数
      const newQuery = { ...to.query, userId };
      // 使用replace: true避免在history栈中添加重复记录，进一步规避循环风险
      next({ path: to.path, query: newQuery, replace: true });
      return;
    }
  }
  
  // 不需要修改时直接放行
  next();
});

关键细节说明 #

• 避免循环的核心：只有当目标路由缺失userId，或者userId与来源路由不一致时，才会触发路由修改；修改后的路由已经携带了正确的userId，下一次守卫就会直接放行，不会再进入修改分支。
• replace: true的作用：用新路由替换当前的history记录，而不是添加新记录，既符合“跳转后携带参数”的需求，也能避免history栈中堆积大量重复路由条目。
• 正确合并参数：用扩展运算符{ ...to.query, userId }（或Object.assign({}, to.query, { userId })）保证query结构正确，不会出现参数混乱的情况。

扩展场景：传递多个参数 #

如果后续需要自动传递更多参数，比如token，可以用数组批量处理：

// 定义需要自动传递的参数列表
const autoPassParams = ['userId', 'token'];

router.beforeEach((to, from, next) => {
  const newQuery = { ...to.query };
  let needUpdate = false;
  
  autoPassParams.forEach(param => {
    const paramValue = from.query[param];
    // 仅当来源有参数，且目标无此参数/参数不一致时更新
    if (paramValue && (!to.query[param] || to.query[param] !== paramValue)) {
      newQuery[param] = paramValue;
      needUpdate = true;
    }
  });
  
  if (needUpdate) {
    next({ path: to.path, query: newQuery, replace: true });
    return;
  }
  
  next();
});

内容的提问来源于stack exchange，提问作者Andrew Kim