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 三种创建对象的方法
Oct 16 Javascript
Jquery命名冲突解决的五种方案分享
Mar 16 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
js中Array对象的常用遍历方法详解
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
对javascript和select部件的结合运用
2006/10/09 PHP
php连接mssql的一些相关经验及注意事项
2013/02/05 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
php 静态属性和静态方法区别详解
2017/04/09 PHP
PHP实现微信提现功能
2018/09/30 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python多线程之事件Event的使用详解
2018/04/27 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python线程threading模块用法详解
2020/02/26 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
个人求职自荐信范文
2014/06/20 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
2015年电教工作总结
2015/05/26 职场文书
小学运动会加油词
2015/07/18 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
工厂无线对讲系统解决方案
2022/02/18 无线电
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript