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试卷自动排版系统
Jul 18 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
Servlet返回的数据js解析2种方法
Dec 12 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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文本操作类
2006/11/25 PHP
php的一个简单加密解密代码
2014/01/14 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
vant picker+popup 自定义三级联动案例
2020/11/04 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
基于python生成英文版词云图代码实例
2020/05/16 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
超市促销实习自我鉴定
2013/09/23 职场文书
人资专员岗位职责
2014/04/04 职场文书
公司联欢会策划方案
2014/05/19 职场文书
公司董事长岗位职责
2014/06/08 职场文书
安全责任书模板
2014/07/22 职场文书
安全目标责任书
2014/07/22 职场文书
销售工作决心书
2015/02/04 职场文书