Vue Router：点击router-link时如何将新查询参数追加至现有查询参数中？

这个问题我之前也碰到过！其实你误解了append属性的作用——它是用来追加路径片段的（比如把/detail追加到/product后面变成/product/detail），完全不会处理查询参数，所以才会出现新参数直接替换旧参数的情况。

要实现查询参数的追加效果，核心思路是手动合并当前路由的查询参数和新参数，下面给你两种实用的实现方式：

方式一：Vue 2选项式API写法 #

在组件里定义一个方法，专门用来合并查询参数，然后把这个方法的返回值绑定到router-link的:to属性上：

<template>
  <div>
    <router-link :to="mergeQuery({ color: 'red' })">color</router-link>
    <router-link :to="mergeQuery({ size: 2 })">size</router-link>
    <router-link :to="mergeQuery({ men: true })">men</router-link>
  </div>
</template>

<script>
export default {
  methods: {
    mergeQuery(newParams) {
      return {
        // 展开当前路由已有的查询参数，再展开新参数实现追加/覆盖
        query: { ...this.$route.query, ...newParams },
        // 如果需要固定当前路径，可以加上这一行（默认会保留当前路径，可省略）
        path: this.$route.path
      }
    }
  }
}
</script>

方式二：Vue 3组合式API写法 #

如果是用Vue 3的<script setup>语法，写法会更简洁：

<template>
  <div>
    <router-link :to="mergeQuery({ color: 'red' })">color</router-link>
    <router-link :to="mergeQuery({ size: 2 })">size</router-link>
    <router-link :to="mergeQuery({ men: true })">men</router-link>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

// 获取当前路由实例
const route = useRoute()

const mergeQuery = (newParams) => {
  return {
    query: { ...route.query, ...newParams },
    path: route.path // 可选，固定当前路径
  }
}
</script>

原理说明 #

这种写法通过ES6的扩展运算符...，把当前路由的query对象和新的参数对象合并在一起：

• 如果新参数和已有参数重名，新参数会覆盖旧参数（比如再次点击color链接会更新color的值）
• 如果新参数是新字段，就会直接追加到查询参数里，完全符合你的预期效果

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