这次给大家带来Vue怎样切换国家语言，Vue切换国家语言的注意事项有哪些，下面就是实战案例，一起来看一下。
在基于vue-cli项目开发过程中，多语言切换功能可使用vue-i18插件，具体实现方法如下：
step1: 在项目中安装vue-i18插件
cnpm install vue-i18n --save-dev
登录后复制
step2:在项目的入口文件main.js中引入vue-i18n插件
import Vue from 'vue' import router from './router' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { 'zh': require('./assets/lang/zh'), 'en': require('./assets/lang/en') } }) // vue实例中引入 /* eslint-disable no-new */ new Vue({ el: '#app', i18n, router, template: '', components: { Layout }, })
登录后复制
step3:页面中使用
在模板中使用时，大概有以下3种情况，若有疏漏，望大家指正
zh.js
module.exports = { menu : { home:"首页" }, content:{ main:"这里是内容" } }
登录后复制
en.js
module.exports = { menu : { home:"home" }, content:{ main:"this is content" } }
登录后复制
1）在标签内作为正文内容
{{$t('menu.home')}}
登录后复制
2)作为标签属性使用
登录后复制
3)作为js中文字使用时
console.log(this.$t('content.main'));
登录后复制
4)待补充…
step4:页面上进行中英文切换，在中英文切换的按钮上绑定事件，如下：
tabEn: function () { this.$i18n.locale = 'en' }, tabCn: function () { this.$i18n.locale = 'zh' }
登录后复制
至此，vue-i18n插件使用完结。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
怎样获取前端界面中的DOM元素绝对位置
怎样获取前端界面中的DOM元素绝对位置
以上就是Vue怎样切换国家语言的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3188504.html
