介绍为什么要使用vue npm install vue-i18n ——save-dev import VueI18n 得到& # 39;vue-i18n& # 39;;
Vue.use (VueI18n);
const i18n =, new VueI18n ({
地区:localStorage.getItem(& # 39;语言# 39;)| | & # 39;zh型# 39;,,//使用localStorage缓存到本地,当下次使用时可默认当前使用语言
消息:{
,& # 39;zh型# 39;:要求(& # 39;。/共同/lang/zh型# 39;),
& # 39;en # 39;:,要求(& # 39;。/共同/lang/en # 39;)
}
})
Vue ({new
el: & # 39; #应用# 39;
路由器,
i18n,
模板:& # 39;& lt; App/祝辞& # 39;
组件:{},App
}) module.exports =, {
语言:,{
名称:,& # 39;英语# 39;
},
导航条:{
家:& # 39;首页& # 39;,
}
} module.exports =, {
语言:,{
名称:,& # 39;中文& # 39;
},
导航条:{
家:& # 39;回家# 39;
}
}
小编给大家分享一下vue怎么使用vue-i18n做全局中英文切换,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!
vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
<强> 1,vue-i18n安装
<强> 2,在主要。js文件中引入
<强> 3,新建中英文语言文件
zh型。js:
。js:
4,创建一个切换语言方法(写在应用。vue可以全局控制);
changeLang (), {
let locale =, localStorage.getItem(& # 39;语言# 39;)| | & # 39;zh型# 39;;
let temp=locale ===, & # 39; zh型# 39;,?,& # 39;en # 39;,:, & # 39; zh型# 39;;
这个。i18n.locale=temp;美元//改变当前语言
,localStorage.language=temp;
} 5,在模板中的使用:
& lt; p> {{, $ t (& # 39; language.name& # 39;),}} & lt;/p>
& lt; p> {{, $ t (& # 39; navbar.contact& # 39;),}} & lt;/p> 看完了这篇文章,相信你对“vue怎么使用vue-i18n做全局中英文切换”有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
