vue 使用vue-i18n做全局中英文切换的方法


Posted in Javascript onOctober 29, 2018

1、vue-i18n安装

npm install vue-i18n --save-dev

2、在main.js文件中引入 

import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

const i18n = new VueI18n({


locale: localStorage.getItem('language')||'zh', //使用localStorage缓存到本地,当下次使用时可默认当前使用语言


messages: {
 '


zh': require('./common/lang/zh'),



'en': require('./common/lang/en')


}

})

new Vue({


el: '#app',


router,


i18n,


template: '<App/>',


components: { App }

})

3、新建中英文语言文件

zh.js:

module.exports = {


language: {



name: 'English'


},


navbar: {



home: '首页',


}

}

en.js: 

module.exports = {


language: {



name: '中文'


},


navbar: {



home: 'Home',


}

}

4、创建一个切换语言方法(写在App.vue可以全局控制);

 changeLang() {

let locale = localStorage.getItem('language')||'zh';


let temp=locale === 'zh' ? 'en' : 'zh';


this.$i18n.locale=temp;//改变当前语言
 

localStorage.language=temp;

}

5、在template中的使用: 

 <p>{{ $t('language.name') }}</p>
<p>{{ $t('navbar.contact') }}</p>

总结

以上所述是小编给大家介绍的vue 使用vue-i18n做全局中英文切换的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
AngularJS进行性能调优的7个建议
Dec 28 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 #Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 #Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 #Javascript
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
深入PHP数据加密详解
2013/06/18 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
为jQuery增加join方法的实现代码
2010/11/28 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
js使用highlight.js高亮你的代码
2017/08/18 Javascript
vue组件横向树实现代码
2018/08/02 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python单链表实现代码实例
2013/11/21 Python
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
基于python实现聊天室程序
2018/07/27 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
实验室的标语
2014/06/20 职场文书
员工2014年度工作总结
2014/12/09 职场文书
小学教师工作总结2015
2015/04/07 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript