vue 使用vue-i18n做全局中英文切换的方法
1、vue-i18n安装
npminstallvue-i18n--save-dev
2、在main.js文件中引入
importVueI18nfrom'vue-i18n';
Vue.use(VueI18n);
consti18n=newVueI18n({
locale:localStorage.getItem('language')||'zh',//使用localStorage缓存到本地，当下次使用时可默认当前使用语言
messages:{
'zh':require('./common/lang/zh'),
'en':require('./common/lang/en')
}
})
newVue({
el:'#app',
router,
i18n,
template:'
3、新建中英文语言文件
zh.js:
module.exports={
language:{
name:'English'
},
navbar:{
home:'首页',
}
}
en.js:
module.exports={
language:{
name:'中文'
},
navbar:{
home:'Home',
}
}
4、创建一个切换语言方法（写在App.vue可以全局控制）；
changeLang(){
letlocale=localStorage.getItem('language')||'zh';
lettemp=locale==='zh'?'en':'zh';
this.$i18n.locale=temp;//改变当前语言
localStorage.language=temp;
}
5、在template中的使用：
{{$t('language.name')}}
{{$t('navbar.contact')}}
总结
以上所述是小编给大家介绍的vue使用vue-i18n做全局中英文切换的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！