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變化的功能,基本上就能完成中英切換大部分的問題了。