vue使用i18n实现国际化的方法详解(2)

import Vue from 'vue' import ElementUI from 'element-ui' import VueI18n from 'vue-i18n' import enLocale from 'element-ui/lib/locale/lang/en' //引入Element UI的英文包 import zhLocale from 'element-ui/lib/locale/lang/zh-CN' //引入Element UI的中文包 Vue.use(VueI18n); Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) }); //兼容i18n 7.x版本设置 const i18n = new VueI18n({ locale: 'zh', // 语言标识 messages: { zh: Object.assign(require('@/components/common/lang/zh'), zhLocale), //这里需要注意一下，是如何导入多个语言包的 en: Object.assign(require('@/components/common/lang/en'), enLocale), } });

注意：关于导入多个语言包时遇到的问题，我是在Element UI 国际化文档中发现的解决办法。

六、路由与面包屑导航国际化的语法问题

在对面包屑导航进行国际化时不知道如何进行。在网上翻阅了一些资料，得到如下代码，完美解决问题：
router.js(路由配置文件)

{ path: '/index', name: 'nav.Home', //直接点出对应的文字 component: (resolve) => require(['@/components/index'], resolve) }

Breadcrumb.vue(面包屑导航组件)

<div> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/index' }">{{$t('nav.Home')}}</el-breadcrumb-item> /*注意{{$t(item.name)}}*/ <el-breadcrumb-item v-for="item in $route.matched" :to="{ path: item.path}">{{$t(item.name)}}</el-breadcrumb-item> </el-breadcrumb> </div>

七、至此，国际化的坑算是踩完了。