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 HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
vue-router为激活的路由设置样式操作
Jul 18 Javascript
JS实现扫雷项目总结
May 19 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
微信公众号点击菜单即可打开并登录微站的实现方法
2014/11/14 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
Use Word to Search for Files
2007/06/15 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python中取整的几种方法小结
2017/01/06 Python
windows下python安装pip图文教程
2018/05/25 Python
python实现连续图文识别
2018/12/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
用Python实现定时备份Mongodb数据并上传到FTP服务器
2021/01/27 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
销售代表求职自荐信
2013/10/01 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
冰雪公主观后感
2015/06/16 职场文书
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis