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的图片大小自动适应实现代码
Nov 17 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
Javascript中typeof 用法小结
May 12 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
VSCode搭建React Native环境
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
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
简单使用webpack打包文件的实现
2019/10/29 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
flask中的wtforms使用方法
2018/07/21 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
如何使用python传入不确定个数参数
2020/02/18 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
计算机网络及管理学专业求职信
2014/06/05 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis
Python实现信息管理系统
2022/06/05 Python