Vue Router-Link如何仅修改单个路由参数，保留其余现有参数？

这问题我太熟悉了！你现在碰到的核心问题是：当你在router-link的:to参数里只传入部分路由参数时，Vue Router会自动用路由定义里的默认值（或者页面初始加载时的参数值）来补全缺失的参数，这就是为什么切换用户时日期会回退到旧值。

解决方案：保留现有参数，只修改目标参数 #

核心思路是复用当前路由的所有现有参数，只替换你需要修改的那一个，具体操作如下：

1. 修改用户链接的代码

把当前路由的所有参数通过扩展运算符...$route.params带进来，只覆盖selectedUser：

<li v-for="user in users">
  <router-link 
    :class="{ active: user.id == selected }" 
    :to="{ 
      name: 'MainRoute', 
      params: { 
        ...$route.params, // 保留当前的视图、年、月参数
        selectedUser: user.id // 仅替换选中的用户ID
      } 
    }"
  >
    {{ user.username }}
  </router-link>
</li>

2. 优化日历修改链接（可选但推荐）

同样的逻辑，修改日期时也应该保留当前的用户参数，避免切换日期时用户被重置：

<router-link 
  :to="{ 
    name: 'MainRoute', 
    params: { 
      ...$route.params, // 保留当前用户和视图参数
      selectedMonth: '09', 
      selectedYear: '2009' 
    } 
  }"
>
  Change date
</router-link>

原理说明 #

...$route.params是ES6的对象扩展运算符，它会将当前路由$route对象里的params属性（包含selectedUser、selectedView、selectedYear、selectedMonth所有参数）完整复制到新的参数对象中。之后你传入的新参数会覆盖原有对象里的同名属性，这样就实现了“只更新需要修改的参数，其他参数原样保留”的效果。

如果你的项目是Vue 2，需要确保已经配置了Babel来支持ES6语法；Vue 3项目默认支持，无需额外配置。

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