vue-i18n 国际化参考 https://blog.csdn.net/zuorishu/article/details/81708585
说得比较详细。
另外做点补充,比如这里cn下的可以以项目模块加公共模块来细分。
import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入element语言包
const cn = {
message: {
'text': '好好学习,天天向上',
},
...zhLocale
}
export default cn;
另外据说可以在js用 this.$t(‘xxx’)方式来切换值,但是我项目中好像是不行。中英选择切换后,还得切换页面才行,并不会更新dom上的。
这篇是针对这个问题来解决的,感觉解决办法有点low:
一般中英切换标示是保存在localStorage中的。
created() {
let that = this;
that.selectValue = localStorage.lang == undefined?'cn':localStorage.lang
},
methods: {
//语言切换
langChange(e){
// localStorage.setItem('lang',e);
//这里至于为什么改为restSetItem方法看接下内容
this.resetSetItem('lang',e);
this.$i18n.locale = e;
}
}
那我们就需要监听localStorage的setItem方法。来动态改变数据驱动。
Vue.prototype.resetSetItem = function (key, newVal) {
if (key === 'lang') {
// 创建一个StorageEvent事件
var newStorageEvent = document.createEvent('StorageEvent');
const storage = {
setItem: function (k, val) {
localStorage.setItem(k, val);
// 初始化创建的事件
newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
// 派发对象
window.dispatchEvent(newStorageEvent)
}
}
return storage.setItem(key, newVal);
}
}
这个是网上原本监听sessionStorage的,我只不过改成localStorage。
//增加中英切换判断
var tempLang = localStorage.lang == undefined?'cn':localStorage.lang;
window.addEventListener('setItem',function(){
tempLang = localStorage.getItem('lang');
if(tempLang == 'cn'){
if (from.name === "unknownAssetHandle" || from.name === "unknownAsset"||from.name ==="unknownAssetHost") {
if (vm.oper === 'modify') {
vm.title = "未知资产 处理"
} else {
vm.title = "未知资产 查看"
}
} else if (from.name === "assetChangeHist") {
vm.title = "资产历史 查看"
vm.hostPropertyShow=false;
} else {
if (vm.oper === 'modify') {
vm.title = "资产管理 修改"
vm.tagType='primary'
} else if (vm.oper === 'detail') {
vm.title = "资产管理 查看"
vm.tagClose=false;
vm.tagType='gray'
} else {
vm.title = "资产管理 新增"
vm.hostPropertyShow=false;
vm.tagType='primary'
}
}
}else if(tempLang == 'en'){
if (from.name === "unknownAssetHandle" || from.name === "unknownAsset"||from.name ==="unknownAssetHost") {
if (vm.oper === 'modify') {
vm.title = "unknownAsset handle"
} else {
vm.title = "unknownAsset detail"
}
} else if (from.name === "assetChangeHist") {
vm.title = "assetHistory detail"
vm.hostPropertyShow=false;
} else {
if (vm.oper === 'modify') {
vm.title = "assetManage modify"
vm.tagType='primary'
} else if (vm.oper === 'detail') {
vm.title = "assetManage detail"
vm.tagClose=false;
vm.tagType='gray'
} else {
vm.title = "assetManage add"
vm.hostPropertyShow=false;
vm.tagType='primary'
}
}
}
});
if(tempLang == 'cn'){
if (from.name === "unknownAssetHandle" || from.name === "unknownAsset"||from.name ==="unknownAssetHost") {
if (vm.oper === 'modify') {
vm.title = "未知资产 处理"
} else {
vm.title = "未知资产 查看"
}
} else if (from.name === "assetChangeHist") {
vm.title = "资产历史 查看"
vm.hostPropertyShow=false;
} else {
if (vm.oper === 'modify') {
vm.title = "资产管理 修改"
vm.tagType='primary'
} else if (vm.oper === 'detail') {
vm.title = "资产管理 查看"
vm.tagClose=false;
vm.tagType='gray'
} else {
vm.title = "资产管理 新增"
vm.hostPropertyShow=false;
vm.tagType='primary'
}
}
}else if(tempLang == 'en'){
if (from.name === "unknownAssetHandle" || from.name === "unknownAsset"||from.name ==="unknownAssetHost") {
if (vm.oper === 'modify') {
vm.title = "unknownAsset handle"
} else {
vm.title = "unknownAsset detail"
}
} else if (from.name === "assetChangeHist") {
vm.title = "assetHistory detail"
vm.hostPropertyShow=false;
} else {
if (vm.oper === 'modify') {
vm.title = "assetManage modify"
vm.tagType='primary'
} else if (vm.oper === 'detail') {
vm.title = "assetManage detail"
vm.tagClose=false;
vm.tagType='gray'
} else {
vm.title = "assetManage add"
vm.hostPropertyShow=false;
vm.tagType='primary'
}
}
}
});
通过添加setItem监听来获取中英切换时保存进去的标示,从而设置中英两套在js中被直接赋值中文或英文的对象。上面代码除了设置监听还有根据初始化的值来显示。只不过这样看代码感觉冗余比较严重,不知道有什么更好的办法。
通过上面借鉴国际化以及原生监听localStorage变化的功能,基本上就能完成中英切换大部分的问题了。