如何在更改语言时更改页面元数据。
在堆栈溢出
如何在 Nuxt3 中的 HtmlAttr 中动态设置目录和语言环境？
有一种方法可以更改 html 标签的 lang 和 dir 属性。
但是，我需要更改 head 部分中链接标记的 rel 和 href 属性。
当语言发生变化时，这必须动态完成。如果我们沿着本地化路径前进，则本地化值将在 useHead 组合中被替换。但是，如果我们更改语言，之前区域设置的值将保留。
我尝试了以下方法。
创建一个在语言更改时调用的钩子，该钩子又调用 useHead。然而，这不是一个有效的方法。
<script setup lang="ts">
const { t } = useI18n();
useHead({
// TODO: словить изменение языка и поставить нужны рефланги
link: [{ rel: t("myLocaleRefValue"), href: t("myLocaleHrefValue") }],
});
const { setLocale } = useI18n();
async function useLocaleHook(locale:string) {
await setLocale(locale)
useHead({
link: [{ rel: t("myLocaleRefValue"), href: t("myLocaleHrefValue") }],
});
}
</script>
<template>
<Body>
<NuxtLayout>
<NuxtLoadingIndicator />
<NuxtPage />
</NuxtLayout>
</Body>
</template>
万岁，我找到了解决方案。
要做到这一点，您需要将其包装在箭头函数中，而不是仅仅传递一个值，然后这些值将被反应性地替换。
useHead({
link: [{ rel: () => t("myLocaleRelValue"), href: () => t("myLocaleHrefValue"), }],
});
这样，这些值将被反应性地替换。