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做全局中英文切换的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
热门推荐
10 朋友新年祝福语大全 简短
11 新年祝福语简短大方兔年
12 搬新家礼物祝福语简短
13 同学见面花束祝福语简短
14 五一假期祝福语幽默简短
15 离职欢送敬酒祝福语简短
16 对学弟的祝福语简短
17 考老师辞职祝福语简短
18 祝福语驱散霉运的话简短