vue-i18n中英文切换后部分文字为改变

Question

使用vue-i18n进行中英文切换必须刷新页面才起作用吗？直接进行切换部分失效。

<button v-for="(item, index) in languageList" :key="index"  @click="languageChange(index)"> {{ item.name }}</button>
languageList: [
        { name: '简体中文（Chs）', value: 'zh' },
        { name: 'English（En）', value: 'en' }
      ],
languageChange(index) {
      this.activePhy = index
      this.$i18n.locale = this.languageList[index].value
      localStorage.setItem('language', this.languageList[index].value)
      window.location.reload() // 用来刷新页面
    },

Answer 1

不需要刷新页面就可以进行中英文切换。

可以在切换语言的时候动态的更新翻译文本。例如：

languageChange(index) {
  this.activePhy = index
  this.$i18n.locale = this.languageList[index].value
  localStorage.setItem('language', this.languageList[index].value)
},

这样，在页面中使用 $t 方法进行翻译的地方就会根据切换后的语言进行渲染。

---

另外，为了在切换语言后保存当前选择的语言，可以使用 localStorage 存储当前选择的语言。在页面加载时，可以读取 localStorage 中保存的语言设置，如果有的话就使用它，否则使用默认的语言。

例如：

mounted() {
  let language = localStorage.getItem('language')
  if (language) {
    this.$i18n.locale = language
  }
},

这样，在用户切换语言后，在下次打开页面时会使用上次选择的语言。