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.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
谈一谈javascript闭包
Jan 28 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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计算一个文件大小的方法
2015/03/30 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
php和nginx交互实例讲解
2019/09/24 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JS组件中bootstrap multiselect两大组件较量
2016/01/26 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python编码时应该注意的几个情况
2013/03/04 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python读取word文本操作详解
2018/01/22 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python通过format函数格式化显示值
2020/10/17 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
某科技软件测试面试题
2013/05/19 面试题
酒店节能减排方案
2014/05/26 职场文书
民事和解协议书格式
2014/11/29 职场文书
给老婆的保证书
2015/01/16 职场文书
汉字听写大会观后感
2015/06/12 职场文书
小学英语教学随笔
2015/08/14 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL