vue 使用vue-i18n做全局中英文切换的方法

更新时间：2018年10月29日 15:35:07 作者：Leepyng

这篇文章主要介绍了vue 使用vue-i18n做全局中英文切换的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下

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做全局中英文切换的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

vue
i18n

深入探讨Vue计算属性与监听器的区别和用途
在Vue的开发中,计算属性（Computed Properties）和监听器（Watchers）是两种非常重要的概念,它们都用于响应式地处理数据变化,本文将带你深入了解计算属性和监听器的区别,以及在何时使用它们,感兴趣的朋友可以参考下
2023-09-09
详解vue项目接入微信JSSDK的坑
这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
浅谈vuex为什么不建议在action中修改state
这篇文章主要介绍了浅谈vuex为什么不建议在action中修改state，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
vue3时间戳转换（不使用过滤器）
这篇文章主要介绍了vue3时间戳转换， vue2转换时间戳的时候一般使用过滤器的方式，到vue3之后，vue3移除了过滤器，就不能再用了，官方是推荐使用方法或者计算属性的方式。下面我们来看看详细介绍吧</P><P>
2021-12-12
Vue如何整合mavon-editor编辑器(markdown编辑和预览)
这篇文章主要介绍了Vue整合mavon-editor编辑器(markdown编辑和预览)的相关知识，mavon-editor是目前比较主流的markdown编辑器，重点介绍它的使用方法,需要的朋友可以参考下
2022-10-10
vue.js实现会动的简历(包含底部导航功能，编辑功能)
这篇文章主要介绍了vue.js实现一个会动的简历(包含底部导航功能，编辑功能),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
Vue报错Component name"Home"should always be mult
这篇文章主要介绍了Vue报错Component name"Home"should always be multi问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue 使用html2canvas将DOM转化为图片的方法
这篇文章主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Vue跨域请求问题解决方案过程解析
这篇文章主要介绍了Vue跨域请求问题解决方案过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
解决vue-cli 打包后自定义动画未执行的问题
今天小编就为大家分享一篇解决vue-cli 打包后自定义动画未执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11