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实现的页内搜索代码
May 23 Javascript
js身份证验证超强脚本
Oct 26 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 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/08/19 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php计算税后工资的方法
2015/07/28 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php实现用户登陆简单实例
2017/04/04 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
javascript倒计时功能实现代码
2012/06/07 Javascript
Js控制滑轮左右滑动实例
2015/02/13 Javascript
JS中获取函数调用链所有参数的方法
2015/05/07 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery实现简单倒计时功能的方法
2016/07/04 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
3种vue组件的书写形式
2017/11/29 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
google广告之另类js调用实现代码
2020/08/22 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python读取ini配置文件过程示范
2019/12/23 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
降低python版本的操作方法
2020/09/11 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
企业新年寄语
2014/04/04 职场文书
会计工作能力自我评价
2015/03/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书