blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-05 07:27:06 +08:00
Code Issues Projects Releases Wiki Activity

add: support parameterized route multi-tab title setting; #339 🐛

Browse Source 
新增：支持带参路由多页签标题设置；
This commit is contained in:
chenghongxing 2023-04-10 23:27:16 +08:00
parent 9a7493c99c
commit baae56f715
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layouts/tabs/TabsHead.vue
View File

@ -95,8 +95,7 @@
this.$emit('contextmenu', pageKey, e)
},
pageName(page) {
const pagePath = page.fullPath.split('?')[0]
const custom = this.customTitles.find(item => item.path === pagePath)
const custom = this.customTitles.find(item => item.path === page.path)
return (custom && custom.title) || page.title || this.$t(getI18nKey(page.keyPath))
}
}

16
src/layouts/tabs/TabsView.vue
View File

@ -13,7 +13,7 @@
<div :class="['tabs-view-content', layout, pageWidth]" :style="`margin-top: ${multiPage ? -24 : 0}px`">
<page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
<a-keep-alive :exclude-keys="excludeKeys" v-if="multiPage && cachePage" v-model="clearCaches">
<router-view v-if="!refreshing" ref="tabContent" :key="$route.path" />
<router-view v-if="!refreshing" ref="tabContent" :key="$route.fullPath" />
</a-keep-alive>
<router-view ref="tabContent" v-else-if="!refreshing" />
</page-toggle-transition>
@ -62,10 +62,10 @@ export default {
this.loadCacheConfig(this.$router?.options?.routes)
this.loadCachedTabs()
const route = this.$route
if (this.pageList.findIndex(item => item.path === route.path) === -1) {
if (this.pageList.findIndex(item => item.path === route.fullPath) === -1) {
this.pageList.push(this.createPage(route))
}
this.activePage = route.path
this.activePage = route.fullPath
if (this.multiPage) {
this.$nextTick(() => {
this.setCachedKey(route)
@ -86,8 +86,8 @@ export default {
this.loadCacheConfig(val)
},
'$route': function (newRoute) {
this.activePage = newRoute.path
const page = this.pageList.find(item => item.path === newRoute.path)
this.activePage = newRoute.fullPath
const page = this.pageList.find(item => item.path === newRoute.fullPath)
if (!this.multiPage) {
this.pageList = [this.createPage(newRoute)]
} else if (page) {
@ -261,7 +261,7 @@ export default {
return {
keyPath: route.matched[route.matched.length - 1].path,
fullPath: route.fullPath, loading: false,
path: route.path,
path: route.fullPath,
title: route.meta && route.meta.page && route.meta.page.title,
unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
}
@ -271,7 +271,7 @@ export default {
* @param route 页面对应的路由
*/
setCachedKey(route) {
const page = this.pageList.find(item => item.path === route.path)
const page = this.pageList.find(item => item.path === route.fullPath)
page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
if (!page._init_) {
const vnode = this.$refs.tabContent.$vnode
@ -301,7 +301,7 @@ export default {
routes.forEach(item => {
const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
if (!cacheAble) {
this.excludeKeys.push(new RegExp(`${item.path.replace(/:[^/]*/g, '[^/]*')}\\d*$`))
this.excludeKeys.push(new RegExp(`${item.path.replace(/:[^/]*/g, '[^/]*')}(\\?.*)?\\d*$`))
}
if (item.children) {
this.loadCacheConfig(item.children, cacheAble)

9
src/plugins/tabs-page-plugin.js
View File

@ -17,8 +17,9 @@ const TabsPagePlugin = {
},
$setPageTitle(route, title) {
if (title) {
let path = typeof route === 'object' ? route.path : route
path = path && path.split('?')[0]
// let path = typeof route === 'object' ? route.path : route
// path = path && path.split('?')[0]
let path = typeof route === 'object' ? this.$router.resolve(route).route.fullPath : route
this.$store.commit('setting/setCustomTitle', {path, title})
}
}
@ -26,8 +27,8 @@ const TabsPagePlugin = {
computed: {
customTitle() {
const customTitles = this.$store.state.setting.customTitles
const path = this.$route.path.split('?')[0]
const custom = customTitles.find(item => item.path === path)
// const path = this.$route.path.split('?')[0]
const custom = customTitles.find(item => item.path === this.$route.fullPath)
return custom && custom.title
}
}