Nuxt3中useFetch缓存问题：动态页面返回后不加载新数据

问题现象 #

• 动态页面[slug].vue首次进入可正确加载对应slug的数据
• 离开页面后返回，不会加载新slug对应的数据，仍显示旧内容
• 刷新页面后，能正常加载当前slug的新数据
• 核心问题：切换slug后，新的API请求并未发起

问题原因 #

原代码中useFetch在组件初始化时仅执行一次，且直接使用了初始的slug值。Nuxt3中，同组件不同路由参数的切换不会重新初始化组件，因此useFetch不会再次执行，也就不会发起新的API请求。

解决方案 #

修改代码，让useFetch响应路由参数的变化，自动重新发起请求：

<script setup lang="ts">
const route = useRoute();

// 用工厂函数生成响应式URL，并监听路由参数变化
const { data: article } = await useFetch(
  () => `https://swapi.dev/api/people/${route.params.slug}`,
  {
    watch: [() => route.params.slug]
  }
);
</script>
<template>
  <div>
    <NuxtLink to="/">返回首页</NuxtLink>
    <pre>
      {{ `https://swapi.dev/api/people/${route.params.slug}` }}
      {{ route.params.slug }}
      {{ article }}
    </pre>
  </div>
</template>

修改说明 #

1. 响应式URL：使用工厂函数() => ...生成请求URL，确保URL会随route.params.slug的变化而更新
2. 监听参数变化：通过watch选项监听route.params.slug，当参数改变时，useFetch会自动重新发起请求
3. 移除冗余代码：不需要额外定义slug ref，直接使用route.params.slug即可

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