如何在Vue中为页面所有router-link添加默认query参数？

需求为仅当前页面生效，统一追加utm_campaign=from_our_friends参数，且不影响复用组件在其他页面的表现，以下是不同场景的可用方案：

方案1：页面级局部重写RouterLink（推荐） #

利用Vue组件局部注册优先级高于全局注册的特性，仅在当前页面组件树内覆盖原生RouterLink，完全不影响其他页面和复用组件的逻辑。

<!-- 当前页面组件 -->
<script setup>
import { h } from 'vue'
import { RouterLink as OriginalRouterLink } from 'vue-router'
// 引入复用组件，不需要做任何修改
import CommonCard from '@/components/CommonCard.vue'

// 局部重写RouterLink，仅当前页面组件树生效
const RouterLink = (props, { slots }) => {
  // 合并原有query和默认参数，不覆盖用户自定义的query
  const mergedTo = typeof props.to === 'string' 
    ? { path: props.to, query: { utm_campaign: 'from_our_friends' } }
    : { ...props.to, query: { ...props.to.query, utm_campaign: 'from_our_friends' } }
  return h(OriginalRouterLink, { ...props, to: mergedTo }, slots)
}
</script>

<template>
  <!-- 页面内直接使用的RouterLink自动携带参数 -->
  <RouterLink to="/detail/1">去详情页</RouterLink>
  <!-- 复用组件内部的RouterLink也会自动使用重写后的版本 -->
  <CommonCard />
</template>

方案2：路由守卫全局控制 #

如果不想修改页面组件代码，可以通过路由守卫判断来源页，跳转时自动追加参数：

// router/index.js
router.beforeEach((to, from, next) => {
  // 仅当从目标页面跳转、且目标地址未携带utm参数时追加
  if (from.name === '你当前页面的路由name' && !to.query.utm_campaign) {
    next({
      ...to,
      query: { ...to.query, utm_campaign: 'from_our_friends' },
      replace: true // 避免多生成一条历史记录
    })
    return
  }
  next()
})

方案3：自定义指令控制生效范围 #

如果只需要给页面内某一个区块的RouterLink加参数，可以用自定义指令实现：

<script setup>
const vAddUtm = {
  mounted(el) {
    const originalHref = el.getAttribute('href')
    const url = new URL(originalHref, window.location.origin)
    url.searchParams.set('utm_campaign', 'from_our_friends')
    el.setAttribute('href', url.toString())
  }
}
</script>

<template>
  <!-- 只有该区块内的RouterLink会被追加参数 -->
  <div v-add-utm>
    <RouterLink to="/list">去列表页</RouterLink>
    <CommonCard />
  </div>
</template>

优先推荐方案1，侵入性最低、逻辑隔离性最好，复用组件不需要做任何适配修改，在其他页面使用时完全不受当前页面逻辑影响。

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