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 相关文章推荐
一个无限级XML绑定跨框架菜单(For IE)
Jan 27 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
jquery中用函数来设置css样式
Dec 22 Javascript
微信小程序 商城开发(ecshop )简单实例
Apr 07 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
php简单数据库操作类的封装
Jun 08 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
Javascript幻灯片播放功能实现过程解析
May 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP记录和读取JSON格式日志文件
2016/07/07 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
jquery 指南/入门基础
2007/11/30 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python温度转换实例分析
2018/01/17 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python3使用SMTP发送简单文本邮件
2018/06/19 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
numpy.random模块用法总结
2019/05/27 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
python与idea的集成的实现
2020/11/20 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
"序列点" 是什么
2016/07/29 面试题
求职信需要的五点内容
2014/02/01 职场文书
采购求职信
2014/03/17 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
大二学年个人总结
2015/03/03 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL