Nuxt3切换语言后动态修改link标签属性与页面元数据

需求明确：在Nuxt3应用切换语言时，自动更新head区域中link标签的rel和href属性。此前尝试在语言切换钩子中重复调用useHead，但旧语言环境的配置仍会保留，无法实现动态更新。

问题根源 #

之前的写法错误在于手动在切换逻辑中重复调用useHead，这种方式不会自动覆盖旧配置，也没利用Nuxt3的响应式特性追踪语言变化。

正确实现方式 #

方法一：利用响应式函数自动更新

直接给useHead传入一个函数，该函数会在响应式依赖变化时重新执行，返回最新的head配置：

<script setup lang="ts">
const { t, setLocale } = useI18n();

// 传入函数给useHead，依赖t函数的响应式特性自动更新
useHead(() => ({
  link: [{ 
    rel: t("myLocaleRefValue"), 
    href: t("myLocaleHrefValue") 
  }]
}));

async function switchLocale(newLocale: string) {
  await setLocale(newLocale);
}
</script>

<template>
  <Body>
    <NuxtLayout>
      <NuxtLoadingIndicator />
      <NuxtPage />
      <!-- 示例切换按钮，可根据业务调整 -->
      <button @click="switchLocale('en')">切换到英文</button>
      <button @click="switchLocale('zh-CN')">切换到中文</button>
    </NuxtLayout>
  </Body>
</template>

方法二：使用computed管理响应式配置

如果需要更清晰地组织head配置，可用computed封装后传给useHead：

<script setup lang="ts">
const { t, locale, setLocale } = useI18n();

// 用computed监听语言变化，生成最新的link配置
const localeHeadConfig = computed(() => ({
  link: [{ 
    rel: t("myLocaleRefValue"), 
    href: t("myLocaleHrefValue") 
  }]
}));

// 把computed对象传给useHead，自动响应变化
useHead(localeHeadConfig);

async function switchLocale(newLocale: string) {
  await setLocale(newLocale);
}
</script>

<template>
  <Body>
    <NuxtLayout>
      <NuxtLoadingIndicator />
      <NuxtPage />
      <button @click="switchLocale('en')">English</button>
      <button @click="switchLocale('zh-CN')">中文</button>
    </NuxtLayout>
  </Body>
</template>

核心原理 #

Nuxt3的useHead支持接收响应式对象或返回配置的函数，当内部依赖的响应式数据（比如locale或t函数）发生变化时，Nuxt会自动重新渲染head区域内容，替换旧配置，从而实现语言切换时元数据的动态更新。

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