如何将路由查询设为useAsyncData监听属性以重启请求

问题原因 #

你直接监听route.query对象时，Vue默认采用浅监听，只会检测对象的引用是否变化。而路由query的内部属性（比如page）更新时，对象本身的引用没有改变，因此无法触发useAsyncData重新执行。

可行解决方案 #

方案1：监听整个route对象并开启深度监听 #

通过监听整个route响应式对象，并开启深度监听来捕捉query内部的变化：

<script setup>
const route = useRoute()
await useAsyncData('products', () => {
  // 这里使用route.query中的参数发起请求
  return $fetch(`/api/products?page=${route.query.page || 1}`)
}, {
  watch: [route],
  deep: true // 开启深度监听，捕捉query内部属性变化
})
</script>

方案2：监听具体的query参数（更高效） #

如果只关心某个特定的query参数（比如page），可以用computed提取该参数，直接监听这个计算属性：

<script setup>
const route = useRoute()
// 提取需要监听的query参数，默认值可根据需求设置
const currentPage = computed(() => route.query.page ?? 1)

await useAsyncData('products', () => {
  return $fetch(`/api/products?page=${currentPage.value}`)
}, {
  watch: [currentPage]
})
</script>

方案3：用函数返回要监听的query对象 #

通过函数返回route.query，让Vue能追踪到其内部属性的变化：

<script setup>
const route = useRoute()
await useAsyncData('products', () => {
  return $fetch(`/api/products?page=${route.query.page || 1}`)
}, {
  watch: [() => route.query]
})
</script>

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