mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-05 07:27:06 +08:00
修复：带查询参数的路由导致多页签出现页面多开问题；
This commit is contained in:
chenghongxing
parent
ce83564335
commit
816d19f7da
@ -14,11 +14,11 @@
|
||||
:type="fixedTabs ? 'lock' : 'unlock'"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<a-tab-pane v-for="page in pageList" :key="page.fullPath">
|
||||
<div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.fullPath, e)">
|
||||
<a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.fullPath !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
|
||||
<div class="title" @click="onTabClick(page.fullPath)" >{{pageName(page)}}</div>
|
||||
<a-icon v-if="!page.unclose" @click="onClose(page.fullPath)" class="icon-close" type="close"/>
|
||||
<a-tab-pane v-for="page in pageList" :key="page.path">
|
||||
<div slot="tab" class="tab" @contextmenu="e => onContextmenu(page.path, e)">
|
||||
<a-icon @click="onRefresh(page)" :class="['icon-sync', {'hide': page.path !== active && !page.loading}]" :type="page.loading ? 'loading' : 'sync'" />
|
||||
<div class="title" @click="onTabClick(page.path)" >{{pageName(page)}}</div>
|
||||
<a-icon v-if="!page.unclose" @click="onClose(page.path)" class="icon-close" type="close"/>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
@ -89,7 +89,7 @@
|
||||
this.$emit('close', key)
|
||||
},
|
||||
onRefresh(page) {
|
||||
this.$emit('refresh', page.fullPath, page)
|
||||
this.$emit('refresh', page.path, page)
|
||||
},
|
||||
onContextmenu(pageKey, e) {
|
||||
this.$emit('contextmenu', pageKey, e)
|
||||
@ -185,4 +185,4 @@
|
||||
.virtual-tabs{
|
||||
height: 48px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -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.fullPath" />
|
||||
<router-view v-if="!refreshing" ref="tabContent" :key="$route.path" />
|
||||
</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.fullPath === route.fullPath) === -1) {
|
||||
if (this.pageList.findIndex(item => item.path === route.path) === -1) {
|
||||
this.pageList.push(this.createPage(route))
|
||||
}
|
||||
this.activePage = route.fullPath
|
||||
this.activePage = route.path
|
||||
if (this.multiPage) {
|
||||
this.$nextTick(() => {
|
||||
this.setCachedKey(route)
|
||||
@ -86,10 +86,13 @@ export default {
|
||||
this.loadCacheConfig(val)
|
||||
},
|
||||
'$route': function (newRoute) {
|
||||
this.activePage = newRoute.fullPath
|
||||
this.activePage = newRoute.path
|
||||
const page = this.pageList.find(item => item.path === newRoute.path)
|
||||
if (!this.multiPage) {
|
||||
this.pageList = [this.createPage(newRoute)]
|
||||
} else if (this.pageList.findIndex(item => item.fullPath === newRoute.fullPath) === -1) {
|
||||
} else if (page) {
|
||||
page.fullPath = newRoute.fullPath
|
||||
} else if (!page) {
|
||||
this.pageList.push(this.createPage(newRoute))
|
||||
}
|
||||
if (this.multiPage) {
|
||||
@ -113,25 +116,26 @@ export default {
|
||||
methods: {
|
||||
changePage (key) {
|
||||
this.activePage = key
|
||||
this.$router.push(key)
|
||||
const page = this.pageList.find(item => item.path === key)
|
||||
this.$router.push(page.fullPath)
|
||||
},
|
||||
remove (key, next) {
|
||||
if (this.pageList.length === 1) {
|
||||
return this.$message.warning(this.$t('warn'))
|
||||
}
|
||||
//清除缓存
|
||||
let index = this.pageList.findIndex(item => item.fullPath === key)
|
||||
let index = this.pageList.findIndex(item => item.path === key)
|
||||
this.clearCaches = this.pageList.splice(index, 1).map(page => page.cachedKey)
|
||||
if (next) {
|
||||
this.$router.push(next)
|
||||
} else if (key === this.activePage) {
|
||||
index = index >= this.pageList.length ? this.pageList.length - 1 : index
|
||||
this.activePage = this.pageList[index].fullPath
|
||||
this.activePage = this.pageList[index].path
|
||||
this.$router.push(this.activePage)
|
||||
}
|
||||
},
|
||||
refresh (key, page) {
|
||||
page = page || this.pageList.find(item => item.fullPath === key)
|
||||
page = page || this.pageList.find(item => item.path === key)
|
||||
page.loading = true
|
||||
this.clearCache(page)
|
||||
if (key === this.activePage) {
|
||||
@ -159,7 +163,7 @@ export default {
|
||||
},
|
||||
closeOthers (pageKey) {
|
||||
// 清除缓存
|
||||
const clearPages = this.pageList.filter(item => item.fullPath !== pageKey && !item.unclose)
|
||||
const clearPages = this.pageList.filter(item => item.path !== pageKey && !item.unclose)
|
||||
this.clearCaches = clearPages.map(item => item.cachedKey)
|
||||
this.pageList = this.pageList.filter(item => !clearPages.includes(item))
|
||||
// 判断跳转
|
||||
@ -169,25 +173,25 @@ export default {
|
||||
}
|
||||
},
|
||||
closeLeft (pageKey) {
|
||||
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
|
||||
const index = this.pageList.findIndex(item => item.path === pageKey)
|
||||
// 清除缓存
|
||||
const clearPages = this.pageList.filter((item, i) => i < index && !item.unclose)
|
||||
this.clearCaches = clearPages.map(item => item.cachedKey)
|
||||
this.pageList = this.pageList.filter(item => !clearPages.includes(item))
|
||||
// 判断跳转
|
||||
if (!this.pageList.find(item => item.fullPath === this.activePage)) {
|
||||
if (!this.pageList.find(item => item.path === this.activePage)) {
|
||||
this.activePage = pageKey
|
||||
this.$router.push(this.activePage)
|
||||
}
|
||||
},
|
||||
closeRight (pageKey) {
|
||||
// 清除缓存
|
||||
const index = this.pageList.findIndex(item => item.fullPath === pageKey)
|
||||
const index = this.pageList.findIndex(item => item.path === pageKey)
|
||||
const clearPages = this.pageList.filter((item, i) => i > index && !item.unclose)
|
||||
this.clearCaches = clearPages.map(item => item.cachedKey)
|
||||
this.pageList = this.pageList.filter(item => !clearPages.includes(item))
|
||||
// 判断跳转
|
||||
if (!this.pageList.find(item => item.fullPath === this.activePage)) {
|
||||
if (!this.pageList.find(item => item.path === this.activePage)) {
|
||||
this.activePage = pageKey
|
||||
this.$router.push(this.activePage)
|
||||
}
|
||||
@ -234,7 +238,8 @@ export default {
|
||||
closePageListener(event) {
|
||||
const {closeRoute, nextRoute} = event.detail
|
||||
const closePath = typeof closeRoute === 'string' ? closeRoute : closeRoute.path
|
||||
this.remove(closePath, nextRoute)
|
||||
const path = closePath && closePath.split('?')[0]
|
||||
this.remove(path, nextRoute)
|
||||
},
|
||||
/**
|
||||
* 页面刷新事件监听
|
||||
@ -242,7 +247,8 @@ export default {
|
||||
*/
|
||||
refreshPageListener(event) {
|
||||
const {pageKey} = event.detail
|
||||
this.refresh(pageKey)
|
||||
const path = pageKey && pageKey.split('?')[0]
|
||||
this.refresh(path)
|
||||
},
|
||||
/**
|
||||
* 页面 unload 事件监听器，添加页签到 session 缓存，用于刷新时保留页签
|
||||
@ -255,6 +261,7 @@ export default {
|
||||
return {
|
||||
keyPath: route.matched[route.matched.length - 1].path,
|
||||
fullPath: route.fullPath, loading: false,
|
||||
path: route.path,
|
||||
title: route.meta && route.meta.page && route.meta.page.title,
|
||||
unclose: route.meta && route.meta.page && (route.meta.page.closable === false),
|
||||
}
|
||||
@ -264,7 +271,7 @@ export default {
|
||||
* @param route 页面对应的路由
|
||||
*/
|
||||
setCachedKey(route) {
|
||||
const page = this.pageList.find(item => item.fullPath === route.fullPath)
|
||||
const page = this.pageList.find(item => item.path === route.path)
|
||||
page.unclose = route.meta && route.meta.page && (route.meta.page.closable === false)
|
||||
if (!page._init_) {
|
||||
const vnode = this.$refs.tabContent.$vnode
|
||||
@ -294,7 +301,7 @@ export default {
|
||||
routes.forEach(item => {
|
||||
const cacheAble = item.meta?.page?.cacheAble ?? pCache ?? true
|
||||
if (!cacheAble) {
|
||||
this.excludeKeys.push(new RegExp(`${item.fullPath}\\d+$`))
|
||||
this.excludeKeys.push(new RegExp(`${item.path}\\d+$`))
|
||||
}
|
||||
if (item.children) {
|
||||
this.loadCacheConfig(item.children, cacheAble)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user