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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
js 异步操作回调函数如何控制执行顺序
Dec 24 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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随机生成信用卡卡号的方法
2015/03/23 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
JS数据类型STRING使用实例解析
2019/12/18 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
原生js生成图片验证码
2020/10/11 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python导入时小括号大作用
2017/01/10 Python
解决Python获取字典dict中不存在的值时出错问题
2018/10/17 Python
基于python使用tibco ems代码实例
2019/12/20 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
python 如何调用 dubbo 接口
2020/09/24 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
澳大利亚设计的优质鞋类和适合澳大利亚生活方式的服装:Rivers
2019/04/23 全球购物
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
一位农村小子的自荐信
2014/04/07 职场文书
安全生产专项整治方案
2014/05/06 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
暑假打工感想
2015/08/07 职场文书