Nuxt3中nuxt-link动态查询参数仅首次刷新可获取的问题求助

问题原因 #

你的代码中，search.vue 的 <script setup> 顶级代码仅在组件初次挂载时执行一次。当通过 nuxt-link 跳转时，Nuxt 会复用已挂载的页面组件，不会重新执行顶级代码，因此后续路由变化时无法获取更新后的 query.qry 参数。只有刷新浏览器时，组件重新挂载，代码才会再次执行。

解决方案 #

方案1：监听路由参数变化（推荐） #

使用 watch 或 watchEffect 监听 route.query.qry 的变化，确保参数更新时触发逻辑：

<script setup>
const route = useRoute()

// 使用watch监听，支持配置立即执行
watch(
  () => route.query.qry,
  (newQry) => {
    if (newQry) {
      console.log(newQry)
      // 在这里处理搜索逻辑
    }
  },
  { immediate: true } // 确保组件初次挂载时也能触发
)
</script>

或者用 watchEffect 自动追踪依赖：

<script setup>
const route = useRoute()

watchEffect(() => {
  const qry = route.query.qry
  if (qry) {
    console.log(qry)
    // 处理搜索逻辑
  }
})
</script>

方案2：结合useAsyncData处理数据请求 #

如果需要基于搜索参数请求接口，可使用 useAsyncData 并监听路由变化，自动重新获取数据：

<script setup>
const route = useRoute()

const { data: searchResult } = useAsyncData(
  'search', // 唯一key，用于缓存
  () => {
    const qry = route.query.qry
    if (!qry) return null
    // 替换为你的API请求逻辑
    // return $fetch(`/api/search?q=${qry}`)
    console.log(qry)
    return qry
  },
  { watch: [() => route.query.qry] } // 监听参数变化，自动重新执行
)
</script>

额外检查 #

确保 app.vue 中的搜索输入框绑定的是响应式变量：

<script setup>
// 必须定义响应式变量才能让v-model生效
const q = ref('')
</script>

<template>
  <input type="search" v-model="q" />
  <nuxt-link :to="{path: '/search', query: {qry: q}}">Search</nuxt-link>
  <nuxt-page />
</template>

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