点击NuxtLink时如何触发useFetch？分页无响应问题咨询

问题核心在于你当前的useFetch仅在组件初始化时执行一次——query: useRoute().query只是获取了路由参数的初始值，没有建立响应式依赖，所以当路由的page等query参数变化时，useFetch不会自动重新发起请求，视图也不会更新。

下面是几种最优的解决方式：

方法一：给useFetch添加watch监听路由参数 #

直接在useFetch配置中添加watch选项，监听route.query的变化，这样路由参数更新时，请求会自动重新执行：

<script setup lang="ts">
const route = useRoute();
const { data, status, error, refresh } = await useFetch("/api/search", {
  query: route.query, // 直接传入响应式的route.query
  watch: [route.query] // 监听query的变化，触发重新请求
});

const page_options = [10, 25, 50, 100];
</script>

方法二：手动监听关键参数并调用refresh #

如果需要更精细的控制（比如只监听page、per_page、q这几个参数），可以手动监听这些参数的变化，调用refresh方法触发请求：

<script setup lang="ts">
const route = useRoute();
const { data, status, error, refresh } = await useFetch("/api/search", {
  query: route.query,
});

// 监听指定的query参数变化，触发刷新
watch(
  () => [route.query.page, route.query.per_page, route.query.q],
  () => {
    refresh();
  },
  { immediate: false }
);

const page_options = [10, 25, 50, 100];
</script>

方法三：用useAsyncData自定义数据请求逻辑（可选） #

如果需要更灵活的控制，可以用useAsyncData封装请求，同样通过watch选项监听路由参数：

<script setup lang="ts">
const route = useRoute();
const { data, status, error } = await useAsyncData('search-results', () => {
  return $fetch("/api/search", {
    query: route.query
  });
}, {
  watch: [route.query]
});

const page_options = [10, 25, 50, 100];
</script>

额外注意事项 #

• 不要解构route的属性（比如const { query } = useRoute()），解构后会丢失响应性，必须直接使用route.query来保持依赖追踪。
• 你的NuxtLink配置是正确的，它会触发Nuxt的客户端导航（不刷新页面），所以只要让数据请求响应路由参数变化即可。

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