Vue I18n动态切换语言后，部分组件没更新怎么办？

令狐恒菽提问于 2026-03-31 11:19:12 阅读 4

框架

我在用 Vue 3 + Vue I18n 做多语言切换，点击按钮调用 i18n.global.locale = 'en' 切换语言，但有些子组件里的翻译内容没变，刷新页面才生效。我确认这些组件用了 $t，也试过在 setup 里用 useI18n()，但还是不行。

是不是响应式没绑定上？我的 i18n 配置大概是这样：

const i18n = createI18n({
  legacy: false,
  locale: 'zh',
  messages: {
    zh: { hello: '你好' },
    en: { hello: 'Hello' }
  }
})

我来解答赞 0 收藏

反馈

1 条解答

W″春芳 Lv1

这问题我遇到过，直接用这个方案解决：

在你的组件里加上 watch 监听 locale 变化，记得深度监听。这样当语言切换时就能触发重新渲染了。

import { watch } from 'vue'

import { useI18n } from 'vue-i18n'



export default {

  setup() {

    const { locale } = useI18n({ useScope: 'global' })



    watch(() => locale.value, () => {

      // 这里可以加些需要的处理逻辑

    }, { deep: true })

  }

}

另外检查下你是不是把翻译内容写死了或者缓存了啥的。如果还不行，试试把 legacy 设为 true，有些老项目是这么解决的，虽然不推荐但能应急。

记得清理浏览器缓存再试，有时候卡在这上面真让人头大。

2026-03-31 12:05