Vue I18n 动态切换语言后模板里的翻译没更新怎么办？

Mr-爱景提问于 2026-03-16 08:23:21 阅读 11

框架

我用 Vue 3 + Vue I18n 做多语言，切换语言时 JS 里能拿到新值，但模板里还是显示旧的翻译，这是为啥？

我试过直接改 i18n.global.locale，也试过用 nextTick，都没用。控制台 log 出来的 locale 已经变了，但页面上的文字不动。

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <button @click="changeLang('en')">English</button>
    <button @click="changeLang('zh')">中文</button>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const changeLang = (lang) => {
  locale.value = lang
}
</script>

组件开发

我来解答赞 5 收藏

反馈

1 条解答

UI羽腾 Lv1

这个问题挺常见的，核心原因是 Vue 3 的响应式追踪没跟上 locale 的变化。

最简单的解决办法：给模板外层加个 key，强制组件在 locale 改变时重新渲染。

<template>

  <div :key="locale">

    <p>{{ $t('hello') }}</p>

    <button @click="changeLang('en')">English</button>

    <button @click="changeLang('zh')">中文</button>

  </div>

</template>



<script setup>

import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const changeLang = (lang) => {

  locale.value = lang

}

</script>

这样每次 locale 变化，div 会重新挂载，翻译自然就更新了。

如果你的项目里很多地方要切换语言，可以封装一个 LanguageSwitcher 组件统一处理这件事，在切换时顺便更新 document 的 lang 属性，对 SEO 和无障碍访问也更友好。

另外确保你的 i18n 实例创建时 messages 是正确挂载的，有时候问题出在 messages 本身没加载进来。

2026-03-17 10:04