vue2提取vue-router的title单独存放，使用i18n实现

成品效果

首先引入i18n(vue-i18n官网文档) 依赖包

npm install vue-i18n@8

然后单独在src目录下新建一个文件夹lang，存放相对应的变量名称，我这里只做显示中文所以其他引入我都注释了，具体目录如下：

src\lang/zh.js部分代码

export default {route: {riskDetail: '列表库管理',bdTaskRisk: '列表1',bdRepairOrder: '列表2',pdTaskRisk: '列表3',pdRepairOrder: '列表4',sdTaskRisk: '列表5',sdRepairOrder: '列表6',zlTaskRisk: '列表7',zlRepairOrder: '列表8',jobControlCard: '列表9',},navbar: {dashboard: '首页',github: '项目地址',logOut: '退出登录',profile: '个人中心',theme: '换肤',size: '布局大小'},login: {title: '系统登录',logIn: '登录',tenant: '租户',username: '账号',password: '密码',any: '随便填',thirdparty: '第三方登录',thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'},documentation: {documentation: '文档',github: 'Github 地址'},permission: {addRole: '新增角色',editPermission: '编辑权限',roles: '你的权限',switchRoles: '切换权限',tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',delete: '删除',confirm: '确定',cancel: '取消'},guide: {description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',button: '打开引导'},components: {documentation: '文档',tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',stickyTips: '当页面滚动到预设的位置会吸附在顶部',backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'},table: {dynamicTips1: '固定表头, 按照表头顺序排序',dynamicTips2: '不固定表头, 按照点击顺序排序',dragTips1: '默认顺序',dragTips2: '拖拽后顺序',title: '标题',importance: '重要性',type: '类型',remark: '点评',search: '搜索',add: '添加',export: '导出',reviewer: '审核人',id: '序号',date: '时间',author: '作者',readings: '阅读数',status: '状态',actions: '操作',edit: '编辑',publish: '发布',draft: '草稿',delete: '删除',cancel: '取 消',confirm: '确 定'},example: {warning: '创建和编辑页面是不能被 keep-alive 缓存的，因为keep-alive 的 include 目前不支持根据路由来缓存，所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果，可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include，直接缓存所有页面。详情见'},errorLog: {tips: '请点击右上角bug小图标',description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',documentation: '文档介绍'},excel: {export: '导出',selectedExport: '导出已选择项',placeholder: '请输入文件名(默认excel-list)'},zip: {export: '导出',placeholder: '请输入文件名(默认file)'},pdf: {tips: '这里使用   window.print() 来实现下载pdf的功能'},theme: {change: '换肤',documentation: '换肤文档',tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'},tagsView: {refresh: '刷新',close: '关闭',closeOthers: '关闭其它',closeAll: '关闭所有'},settings: {title: '系统布局配置',theme: '主题色',tagsView: '开启 Tags-View',fixedHeader: '固定 Header',sidebarLogo: '侧边栏 Logo'}
}

src\lang\index.js

我这里默认设置只显示中文

import Vue from 'vue'
import VueI18n from 'vue-i18n'
//import Cookies from 'js-cookie'
// import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
// import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
// import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
// import enLocale from './en'
import zhLocale from './zh'
// import esLocale from './es'
// import jaLocale from './ja'Vue.use(VueI18n)const messages = {// en: {//   ...enLocale,//   ...elementEnLocale// },zh: {...zhLocale,...elementZhLocale},// es: {//   ...esLocale,//   ...elementEsLocale// },// ja: {//   ...jaLocale,//   ...elementJaLocale// }
}
export function getLanguage() {// const chooseLanguage = Cookies.get('language')//if (chooseLanguage) return chooseLanguage// if has not choose language// const language = (navigator.language || navigator.browserLanguage).toLowerCase()// const locales = Object.keys(messages)// for (const locale of locales) {//   if (language.indexOf(locale) > -1) {//     return locale//   }// }return 'zh' // 默认中文
}
const i18n = new VueI18n({// set locale// options: en | zh | eslocale: getLanguage(),// set locale messagesmessages
})export default i18n

src\main.js

接着要在main.js引入相关依赖

import Vue from 'vue'import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
// import Cookies from 'js-cookie' //这里不用到字体大小切换所以不存cookies切换
import '@/styles/index.scss' // global cssimport App from './App'
import store from './store'
import router from './router'import i18n from './lang' // internationalizationimport '@/icons' // icon
import '@/permission' // permission control/*** If you don't want to use mock-server* you want to use MockJs for mock api* you can execute: mockXHR()** Currently MockJs will be used in the production environment,* please remove it before going online ! ! !*/
if (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../mock')mockXHR()
}// Vue.use(Element, {
//   size: Cookies.get('size') || 'medium', // set element-ui default size
//   i18n: (key, value) => i18n.t(key, value)
// })//重点代码//
Vue.use(Element, {size: 'medium', // set element-ui default size设置元素默认大小i18n: (key, value) => i18n.t(key, value)// 在注册Element时设置i18n的处理方法
})Vue.config.productionTip = falsenew Vue({el: '#app',router,store,i18n,render: h => h(App)
})

然后修改src/layout/components/Sidebar/SidebarItem.vue文件

<template><div v-if="!item.hidden"><template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow"><app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)"><el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"><item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" /></el-menu-item></app-link></template><el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body><template slot="title"><item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" /></template><sidebar-itemv-for="child in item.children":key="child.path":is-nest="true":item="child":base-path="resolvePath(child.path)"class="nest-menu"/></el-submenu></div>
</template><script>
import path from 'path'
import { generateTitle } from '@/utils/i18n'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'export default {name: 'SidebarItem',components: { Item, AppLink },mixins: [FixiOSBug],props: {// route objectitem: {type: Object,required: true},isNest: {type: Boolean,default: false},basePath: {type: String,default: ''}},data() {// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237// TODO: refactor with render functionthis.onlyOneChild = nullreturn {}},methods: {hasOneShowingChild(children = [], parent) {const showingChildren = children.filter(item => {if (item.hidden) {return false} else {// Temp set(will be used if only has one showing child)this.onlyOneChild = itemreturn true}})// When there is only one child router, the child router is displayed by defaultif (showingChildren.length === 1) {return true}// Show parent if there are no child router to displayif (showingChildren.length === 0) {this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }return true}return false},resolvePath(routePath) {if (isExternal(routePath)) {return routePath}if (isExternal(this.basePath)) {return this.basePath}return path.resolve(this.basePath, routePath)},generateTitle}
}
</script>

然后修改src\components\Breadcrumb\index.vue文件

<template><el-breadcrumb class="app-breadcrumb" separator="/"><transition-group name="breadcrumb"><el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path"><span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span><a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a></el-breadcrumb-item></transition-group></el-breadcrumb>
</template><script>
import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n'
export default {data() {return {levelList: null}},watch: {$route(route) {// if you go to the redirect page, do not update the breadcrumbsif (route.path.startsWith('/redirect/')) {return}this.getBreadcrumb()}},created() {this.getBreadcrumb()},methods: {generateTitle,getBreadcrumb() {// only show routes with meta.titlelet matched = this.$route.matched.filter(item => item.meta && item.meta.title)const first = matched[0]if (!this.isDashboard(first)) {matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)}this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)},isDashboard(route) {const name = route && route.nameif (!name) {return false}return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()},pathCompile(path) {// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561const { params } = this.$routevar toPath = pathToRegexp.compile(path)return toPath(params)},handleLink(item) {const { redirect, path } = itemif (redirect) {this.$router.push(redirect)return}this.$router.push(this.pathCompile(path))}}
}
</script><style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 50px;margin-left: 8px;.no-redirect {color: #97a8be;cursor: text;}
}
</style>

这样就完成了，因为需求不需要语言版本切换就所以借默认了zh,我这里只做个人记录所以代码潦草，不喜勿喷哈。