Nuxt3 useFetch在slug变更时无法自动刷新数据求助

问题根源 #

你的代码存在三个核心问题：

1. 静态Endpoint：endpoint 是在组件初始化时一次性计算的，后续slug变更时不会自动更新，导致useFetch的请求URL始终是初始值。
2. 错误使用await：直接用 await useFetch() 会让请求只执行一次，无法响应后续的依赖变化，useFetch本身是响应式API，不需要用await同步执行。
3. 静态Key参数：key: \key-${slug.value}`` 只会在初始化时生成一次，slug变更后key不会更新，Nuxt无法识别这是新的请求。

修复方案（推荐两种写法） #

方案一：响应式URL + 动态Key

让请求URL和key随slug响应式变化，Nuxt会自动监听依赖并触发重新请求：

<script setup>
const runTimeConfig = useRuntimeConfig()
const route = useRoute()
const slug = computed(() => route.params.slug)

// 用computed生成响应式请求地址
const endpoint = computed(() => `${runTimeConfig.public.API_URL}/wp/v2/pages?slug=${slug.value}`)

const {
  data: page,
  pending,
  error,
  refresh
} = useFetch(endpoint, {
  // 用函数返回动态key，确保slug变化时key更新
  key: () => `page-${slug.value}`,
  initialCache: false
})

// 监听page数据变化，避免初始null的干扰
watch(page, (newPage) => {
  console.log('page: ', toRaw(newPage))
}, { immediate: true })
</script>

方案二：明确监听slug参数

通过useFetch的watch选项，强制监听slug的变化来触发请求刷新：

<script setup>
const runTimeConfig = useRuntimeConfig()
const route = useRoute()
const slug = computed(() => route.params.slug)

const {
  data: page,
  pending,
  error,
  refresh
} = useFetch(
  // 用函数返回URL，确保每次请求都取最新slug值
  () => `${runTimeConfig.public.API_URL}/wp/v2/pages?slug=${slug.value}`,
  {
    watch: [slug], // 明确监听slug的变化
    initialCache: false
  }
)

watch(page, (newPage) => {
  console.log('page: ', toRaw(newPage))
}, { immediate: true })
</script>

补充说明 #

关于你注释掉的definePageMeta：
这个配置是给页面组件设置唯一标识，当slug变更时，Nuxt会重新创建组件实例（而非复用），也能触发setup重新执行来获取新数据，但这种方式是组件层面的重新渲染，不如直接让useFetch响应依赖变化高效，仅作为备选方案。

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