vue-i18n 动态加载渲染问题

Question

概述：动态加载语言包补充模块，不能正常展示。

描述：
1 预先设置中英两个语言。当前为中文。
2 进入/user/list页面之前，动态加载语言包的某个模块如下

// permission.js

i18n.mergeLocaleMessage(i18n.locale, resPonseData)
console.log(i18n.t('common.btn.add')) // 新增

// resPonseData 如：{common.btn.add: "新增", common.btn.adjustment: "调整"...}

3 执行router.beforeEach的next()进入页面,50%的概率渲染失败。

// userList.vue

created () {
 console.log(i18n.t('common.btn.add')) // common.btn.add
 console.log(this.$t('common.btn.add')) // common.btn.add
}

并且通过按钮打印 i18n.messages[i18n.locale] 语言表里并没有看到已经注入的新模块。
permission.js 和 userList.vue 都引入了i18n ，为什么表现不一样呢？

Answer 1

在main.js引入并使用

import i18n from './lang' // Internationalization
Vue.use(Element,{
    i18n: (key, value) => i18n.t(key, value)
  })

语言切换：

    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$store.dispatch('setLanguage', lang)
      this.$message({
        message: 'Switch Language Success',
        type: 'success'
      })
    }
    

你先要确定你的多语言是否能切换成功，动态加载语言包是什么意思？不是直接配置好，然后去切换语言。

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。