vue-i18n 动态加载渲染问题

wzy4072
  • 28

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

描述:
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 ,为什么表现不一样呢?

回复
阅读 2.3k
1 个回答
tina666
  • 392
✓ 已被采纳

在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 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏