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 相关文章推荐
bcastr2.0 通用的图片浏览器
Nov 22 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
javascript 用函数实现继承详解
May 28 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 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
PHP5中MVC结构学习
2006/10/09 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
smarty模板引擎中自定义函数的方法
2015/01/22 PHP
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
快速解决处理后台返回json数据格式的问题
2018/08/07 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python异常和文件处理机制详解
2016/07/19 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Python 从attribute到property详解
2020/03/05 Python
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
J2EE是技术还是平台还是框架
2016/08/14 面试题
实习求职信
2013/12/01 职场文书
县级文明单位申报材料
2014/05/23 职场文书
师范生求职自荐信
2014/06/14 职场文书
宣传普通话标语
2014/06/27 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
资料员岗位职责范本
2015/04/13 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
教师节班会开场白
2015/06/01 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技