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 相关文章推荐
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
JS实现电商商品展示放大镜特效
Jan 07 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
JS常用正则表达式总结
2013/11/12 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python set内置函数的具体使用
2019/07/02 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
爱心捐款倡议书范文
2014/05/12 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
详解Python牛顿插值法
2021/05/11 Python
Python安装使用Scrapy框架
2022/04/12 Python