Nuxt3切换语言时如何用useAsyncData重新获取导航数据？

你的问题核心是初始加载时只获取了对应语言的导航数据，切换语言时没有触发重新请求，导致新语言的链接数量无法更新。可以通过以下步骤修复：

1. 将语言标识转为响应式属性 #

把原来基于初始locale生成的lang改为响应式计算属性，确保它能随locale变化自动更新：

const { locale } = useI18n()
// 用computed包裹，让lang随locale变化而更新
const lang = computed(() => getPageLang(locale.value).lang)

2. 配置useAsyncData并监听语言变化 #

使用useAsyncData的refresh方法，在locale变化时重新获取导航数据：

// 初始化获取导航数据，key包含响应式lang，同时拿到refresh方法
const { data: navi, refresh } = await useAsyncData(
  // 动态生成key，确保不同语言的数据缓存独立
  () => `${PAGE_NAME.NAVI_NAVBAR}_${unref(lang)}`,
  // 请求时传入当前的lang值
  () => client.getByUID(PAGE_TYPE.NAVI, PAGE_NAME.NAVBAR, { lang: unref(lang) })
)

// 监听locale变化，触发数据刷新
watch(locale, () => {
  refresh()
})

关键说明 #

• computed让lang成为响应式变量，保证语言切换时能同步更新Prismic请求的语言参数
• refresh方法是Nuxt3提供的useAsyncData内置方法，会自动重新执行请求并更新navi数据，同时保留缓存机制
• 动态生成的useAsyncData key能确保不同语言的导航数据被独立缓存，避免数据混淆

额外检查 #

• 确认Prismic后台中，不同语言的导航文档UID保持一致（Prismic多语言文档默认共享UID，一般无需额外配置）
• 验证getPageLang函数返回的语言代码与Prismic后台配置的语言标识完全匹配（比如en对应英文，zh-cn对应中文）

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