如何无需重复编写query即可使用NuxtLink且保留URL参数？

如果你想让NuxtLink跳转时自动保留当前URL的查询参数，同时保持简洁的写法，可以用以下几种方案：

方案1：封装自定义可复用组件（推荐） #

把需要保留查询参数的跳转逻辑封装成组件，后续直接调用即可，无需重复编写query参数：

创建components/PersistentQueryNuxtLink.vue文件：

<template>
  <NuxtLink :to="{ path: to, query: useRoute().query }">
    <slot />
  </NuxtLink>
</template>

<script setup>
const props = defineProps({
  to: {
    type: String,
    required: true
  }
})
</script>

使用时写法和你期望的简化形式一致：

<PersistentQueryNuxtLink to="/">Link</PersistentQueryNuxtLink>

这个组件会自动继承当前路由的所有查询参数，跳转后不会丢失参数，同时保持代码简洁。

方案2：页面内定义计算属性 #

如果只是个别页面需要该功能，可以在页面组件内定义计算属性来复用路径配置：

<script setup>
const route = useRoute()
const homeRouteWithQuery = computed(() => ({
  path: '/',
  query: route.query
}))
</script>

<template>
  <NuxtLink :to="homeRouteWithQuery">Link</NuxtLink>
</template>

方案3：全局注册导航辅助函数 #

如果需要在JavaScript逻辑中也实现带参数保留的跳转，可以通过Nuxt插件注册全局函数：

创建plugins/persistent-navigation.ts：

export default defineNuxtPlugin(() => {
  const router = useRouter()
  const route = useRoute()

  return {
    provide: {
      navigateWithQuery: (targetPath: string) => {
        router.push({ path: targetPath, query: route.query })
      }
    }
  }
})

在组件中使用（适合按钮点击等场景）：

<script setup>
const { $navigateWithQuery } = useNuxtApp()
</script>

<template>
  <button @click="$navigateWithQuery('/')">Link</button>
</template>

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