Nuxt3路由切换时数据未加载，刷新后正常的问题求助

问题根源 #

你的代码中，useFetch仅在组件首次初始化时执行一次。当通过NuxtLink切换路由（比如从/a到/b）时，组件不会重新挂载，route.params.category的变化无法触发useFetch重新发起请求，因此新路由对应的数据不会加载，只有刷新页面触发组件重新初始化时才会重新获取数据。

解决方法 #

给useFetch添加监听路由参数变化的配置，让它在route.params.category改变时自动重新请求数据。具体需要修改useFetch的第二个参数，添加watch选项监听目标参数。

修改后的完整代码如下：

<script setup>
import { useFetch } from "nuxt/app";

defineI18nRoute({
  paths: {
    nl: '/category/[category]',
    de: '/category/[category]',
    pl: '/category/[category]',
  }
})

const localePath = useLocalePath()
const route = useRoute()

// 添加watch选项监听route.params.category的变化
let { data } = await useFetch(`https://example.com/api/nl/category/${route.params.category}`, {
  watch: [() => route.params.category]
})
</script>

<template>
  <div class="w-full mx-auto max-w-4xl px-4">
    <ul class="list-disc pl-3 space-y-1 text-sm mb-12" v-if="data">
      <li v-for="(part, partIndex) in JSON.parse(data).articles" :key="partIndex" class="hover:text-green-700">
        <NuxtLink :to="localePath(`/${part.slug}`)" :title="part.title">
          {{ part.title }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

额外优化建议 #

• 避免使用partIndex作为v-for的key，尽量使用每个part的唯一标识（比如part.id），这能提升列表渲染的性能和稳定性。
• 如果API返回的是JSON格式，useFetch默认会自动解析JSON，你可以去掉模板中的JSON.parse(data)，直接使用data.articles，简化代码。

内容的提问来源于stack exchange，提问作者Angelo van Cleef