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 js 获取时间差、时间格式具体代码
Jun 05 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
js截取固定长度的中英文字符的简单实例
Nov 22 Javascript
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 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 搜索框提示(自动完成)实例代码
2012/02/05 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
JS原生瀑布流效果实现
2019/04/26 Javascript
js实现select下拉框选择
2020/01/11 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python对字符串实现去重操作的方法示例
2017/08/11 Python
一些Centos Python 生产环境的部署命令(推荐)
2018/05/07 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
园艺师求职信
2014/03/10 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
小学庆六一主持词
2015/06/30 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android