iview-admin多语言切换文字

iview-admin多语言切换文字

原因分析：
data里的数据this.$t{(}^{\prime }hom{e}_{u}se{r}_{i}ncremen{t}^{\prime })在渲染时已经“定死”了，在切换语言时，并没有对界面里的该数据this.$t(‘home_user_increment’)进行重新执行更新，显然无法实现语言切换。

解决思路：
针对分析，咱想办法把this.$t(‘home_user_increment’)这玩意儿在触发切换语言后再执行一下，细想了下vue的触发更新，于是思路如下走：

首先想到了watch，但是要考虑到之后界面所有文本都需要切语言的啊！！！你watch不累吗
不对呀，只需要watch lang就可以了，正好language.vue这个多语言组件切换的实现也是用的watch: {lang (lang) {this.$i18n.locale = lang}}我们只需要在这里执行相关更新的代码就应该能行了
好，触发方式ok了，执行怎么样的更新呢？为了满足我们的需求，我们得刷新整个界面的文本
那刷新整个界面的文本 = 刷新整个界面，那我直接刷app.vue这个根组件就行了嘛
我就采用了vue的provide和inject方法，app根组件这用v-if来进行界面重载，不了解provide和inject的走你。
App.vue

language.vue

export default {
name: ‘Language’,
inject: [‘reload’], //接受App那边提供的方法
props: {
lang: String
},
data () {
return {
langList: {
‘zh-TW’: ‘繁体’,
‘zh-CN’: ‘中文’,
‘en-US’: ‘英文’
},
localList: {
‘zh-TW’: ‘中文繁体’,
‘zh-CN’: ‘中文简体’,
‘en-US’: ‘English’
}
}
},
watch: {
lang (lang) {
this.$i18n.locale = lang
console.log(‘reload!!!’)
this.reload() //在触发切换语言后调用，相当于直接调用app里写的reload方法
}
},
最后是在locale/lang文件下的语言包文件
zh-CN.js文件
export default {
…
home_user_increment: ‘新增用户’
}

zh-TW.js文件
export default {
…
home_user_increment: ‘新增用戶’
}
en-US.js文件
export default {
…
home_user_increment: ‘User Increment’
}
最后就都会切换语言了！