diff --git a/src/components/main/main.vue b/src/components/main/main.vue index cee62ce22..40f90dbfe 100644 --- a/src/components/main/main.vue +++ b/src/components/main/main.vue @@ -136,7 +136,7 @@ export default { route: { name, query, params, meta }, type: 'push' }) - this.setBreadCrumb(newRoute.matched) + this.setBreadCrumb(newRoute) this.setTagNavList(getNewTagList(this.tagNavList, newRoute)) this.$refs.sideMenu.updateOpenName(newRoute.name) } @@ -149,7 +149,7 @@ export default { this.addTag({ route: this.$store.state.app.homeRoute }) - this.setBreadCrumb(this.$route.matched) + this.setBreadCrumb(this.$route) // 设置初始语言 this.setLocal(this.$i18n.locale) // 文档提示 diff --git a/src/libs/util.js b/src/libs/util.js index 2abc99f65..77fd1f49c 100644 --- a/src/libs/util.js +++ b/src/libs/util.js @@ -52,14 +52,17 @@ export const getMenuByRouter = (list, access) => { * @param {Array} routeMetched 当前路由metched * @returns {Array} */ -export const getBreadCrumbList = (routeMetched, homeRoute) => { +export const getBreadCrumbList = (route, homeRoute) => { + let routeMetched = route.matched let res = routeMetched.filter(item => { return item.meta === undefined || !item.meta.hide }).map(item => { + let meta = {...item.meta} + if (meta.title && typeof meta.title === 'function') meta.title = meta.title(route) let obj = { icon: (item.meta && item.meta.icon) || '', name: item.name, - meta: item.meta + meta: meta } return obj }) @@ -69,6 +72,14 @@ export const getBreadCrumbList = (routeMetched, homeRoute) => { return [Object.assign(homeRoute, { to: homeRoute.path }), ...res] } +export const getRouteTitleHandled = route => { + let router = {...route} + let meta = {...route.meta} + if (meta.title && typeof meta.title === 'function') meta.title = meta.title(router) + router.meta = meta + return router +} + export const showTitle = (item, vm) => vm.$config.useI18n ? vm.$t(item.name) : ((item.meta && item.meta.title) || item.name) /** diff --git a/src/router/routers.js b/src/router/routers.js index c09ccf03d..4154ad62b 100644 --- a/src/router/routers.js +++ b/src/router/routers.js @@ -304,7 +304,7 @@ export default [ name: 'params', meta: { icon: 'md-flower', - title: '动态路由', + title: route => `动态路由-${route.params.id}`, notCache: true, beforeCloseName: 'before_close_normal' }, @@ -315,7 +315,7 @@ export default [ name: 'query', meta: { icon: 'md-flower', - title: '带参路由', + title: route => `带参路由-${route.query.id}`, notCache: true }, component: () => import('@/view/argu-page/query.vue') diff --git a/src/store/module/app.js b/src/store/module/app.js index 1d823af60..006ff7254 100644 --- a/src/store/module/app.js +++ b/src/store/module/app.js @@ -6,7 +6,8 @@ import { getHomeRoute, getNextRoute, routeHasExist, - routeEqual + routeEqual, + getRouteTitleHandled } from '@/libs/util' import beforeClose from '@/router/before-close' import router from '@/router' @@ -31,8 +32,8 @@ export default { menuList: (state, getters, rootState) => getMenuByRouter(routers, rootState.user.access) }, mutations: { - setBreadCrumb (state, routeMetched) { - state.breadCrumbList = getBreadCrumbList(routeMetched, state.homeRoute) + setBreadCrumb (state, route) { + state.breadCrumbList = getBreadCrumbList(route, state.homeRoute) }, setTagNavList (state, list) { if (list) { @@ -55,11 +56,12 @@ export default { } }, addTag (state, { route, type = 'unshift' }) { - if (!routeHasExist(state.tagNavList, route)) { - if (type === 'push') state.tagNavList.push(route) + let router = getRouteTitleHandled(route) + if (!routeHasExist(state.tagNavList, router)) { + if (type === 'push') state.tagNavList.push(router) else { - if (route.name === 'home') state.tagNavList.unshift(route) - else state.tagNavList.splice(1, 0, route) + if (router.name === 'home') state.tagNavList.unshift(router) + else state.tagNavList.splice(1, 0, router) } setTagNavListInLocalstorage([...state.tagNavList]) }