Vue I18n切换Locale后文本未自动翻译，求无缝切换解决方案

我用VueJS搭建的网站，基于VueI18n实现印尼语（id）和英语（en）双语支持。目前切换语言时，虽然能修改i18n的Locale设置，但页面文本必须刷新才能加载对应翻译内容，希望实现无缝切换。

界面情况 #

• 切换前：页面显示印尼语内容，语言切换按钮为英语选项
• 切换后：修改Locale后页面内容未自动更新，需手动刷新才显示英语内容

我的语言切换按钮代码 #

<v-btn
  elevation="0"
  outlined
  class="px-0 rounded-lg"
  color="primary"
  @click.native.stop="$i18n.locale = 'en'"
  v-if="$i18n.locale === 'id'"
>
  <country-flag
    class="ma-0"
    :country="$i18n.locale == 'en' ? 'us' : $i18n.locale"
  />
  <h4 class="text-uppercase font-weight black--text mr-3">
    {{ $i18n.locale == "en" ? "en" : "id" }}
  </h4>
</v-btn>
<v-btn
  elevation="0"
  outlined
  class="px-0 rounded-lg"
  color="primary"
  @click.native.stop="$i18n.locale = 'id'"
  v-else
>
  <country-flag
    class="ma-0"
    :country="$i18n.locale == 'en' ? 'us' : $i18n.locale"
  />
  <h4 class="text-uppercase font-weight black--text mr-3">
    {{ $i18n.locale == "en" ? "en" : "id" }}
  </h4>
</v-btn>

解决方案 #

1. 确保VueI18n实例初始化正确（响应式Locale）

如果是Vue3 + VueI18n v9+，必须按官方标准方式初始化，保证locale是响应式的：

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

// 翻译资源
const messages = {
  id: {
    page: { title: "Halaman Utama" },
    // 其他印尼语翻译
  },
  en: {
    page: { title: "Home Page" },
    // 其他英语翻译
  }
}

const i18n = createI18n({
  locale: 'id', // 默认语言
  fallbackLocale: 'en', // 降级语言
  messages
})

createApp(App).use(i18n).mount('#app')

切换语言时直接修改$i18n.locale（Options API）或i18n.global.locale（Composition API）即可触发响应式更新。

2. 模板中正确使用翻译语法

所有需要翻译的文本必须直接使用$t('key')，不能把翻译结果赋值给非响应式变量：

• ❌ 错误示例（翻译结果不会随Locale更新）：

// Options API 错误写法
data() {
  return {
    title: this.$t('page.title')
  }
}

• ✅ 正确示例：

<!-- 模板中直接调用$t -->
<h1>{{ $t('page.title') }}</h1>

<!-- Composition API 正确写法 -->
<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const pageTitle = computed(() => t('page.title'))
</script>

<template>
  <h1>{{ pageTitle }}</h1>
</template>

3. 修复切换按钮的逻辑错误

你的按钮存在逻辑矛盾：当前Locale是印尼语时，按钮要切换到英语，但国旗和文字却显示印尼语的内容。同时@click.native.stop是多余的（Vuetify的v-btn不需要native修饰符），优化后的代码：

<v-btn
  elevation="0"
  outlined
  class="px-0 rounded-lg"
  color="primary"
  @click="$i18n.locale = 'en'"
  v-if="$i18n.locale === 'id'"
>
  <country-flag class="ma-0" :country="us" />
  <h4 class="text-uppercase font-weight black--text mr-3">en</h4>
</v-btn>
<v-btn
  elevation="0"
  outlined
  class="px-0 rounded-lg"
  color="primary"
  @click="$i18n.locale = 'id'"
  v-else
>
  <country-flag class="ma-0" :country="id" />
  <h4 class="text-uppercase font-weight black--text mr-3">id</h4>
</v-btn>

4. 处理缓存组件的更新问题

如果页面使用了<keep-alive>缓存组件，需要监听Locale变化触发组件更新：

// Options API
watch: {
  '$i18n.locale'() {
    // 重新获取翻译内容或触发组件更新逻辑
    this.fetchData()
  }
}

// Composition API
<script setup>
import { watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()
watch(locale, () => {
  // 执行组件更新逻辑
})
</script>

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