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 纯数字不重复排列的另类方法
Jul 17 Javascript
javascript string字符串优化问题
Jul 31 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
浅谈Vue数据绑定的原理
Jan 08 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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格式化日期实例分析
2014/11/12 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
php-fpm添加service服务的例子
2018/04/27 PHP
PHP文件操作简单介绍及函数汇总
2020/12/11 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Python有序字典简单实现方法示例
2017/09/28 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
Hotels.com英国:全球领先的酒店住宿提供商
2019/01/24 全球购物
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
党校学习思想汇报
2014/01/06 职场文书
美发活动策划书
2014/01/14 职场文书
《长城》教学反思
2014/02/14 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers