fix: 多页签时关闭页面需要清除缓存

This commit is contained in:
wanchun 2022-06-06 16:29:45 +08:00
parent c9d957bac1
commit a6b596929b
3 changed files with 24 additions and 9 deletions

View File

@ -31,8 +31,11 @@
</template> </template>
</FTabs> </FTabs>
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<keep-alive> <keep-alive :include="keepAlivePages">
<component :is="Component" :key="getPageKey(route)" /> <component
:is="getComponent(Component, route, true)"
:key="getPageKey(route)"
/>
</keep-alive> </keep-alive>
</router-view> </router-view>
</template> </template>
@ -68,11 +71,12 @@ export default {
return { return {
path: _route.path, path: _route.path,
route: _route, route: _route,
name: _route.meta.name, name: _route.meta.name ?? _route.name,
title: computed(() => transTitle(title)), title: computed(() => transTitle(title)),
key: getKey() key: getKey()
}; };
}; };
const keepAlivePages = ref([]);
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -122,6 +126,12 @@ export default {
} }
list.splice(index, 1); list.splice(index, 1);
pageList.value = list; pageList.value = list;
const _keepAlivePages = [...keepAlivePages.value];
const keepIndex = _keepAlivePages.indexOf(selectedPage.name);
if (keepIndex !== -1) {
_keepAlivePages.splice(keepIndex, 1);
}
keepAlivePages.value = _keepAlivePages;
}; };
const reloadPage = (path) => { const reloadPage = (path) => {
const selectedPage = findPage(path || unref(route.path)); const selectedPage = findPage(path || unref(route.path));
@ -132,6 +142,7 @@ export default {
const closeOtherPage = (path) => { const closeOtherPage = (path) => {
const selectedPage = findPage(path || unref(route.path)); const selectedPage = findPage(path || unref(route.path));
pageList.value = [selectedPage]; pageList.value = [selectedPage];
keepAlivePages.value = [selectedPage.name];
}; };
const getPageKey = (_route) => { const getPageKey = (_route) => {
const selectedPage = findPage(_route.path); const selectedPage = findPage(_route.path);
@ -151,10 +162,10 @@ export default {
default: default:
} }
}; };
const keepAlivePages = ref([]);
const getComponent = (Component, _route) => { const getComponent = (Component, _route, isKeep = false) => {
if (_route.meta['keep-alive']) { if (isKeep || _route.meta['keep-alive']) {
const name = _route.meta?.name || _route.name; const name = _route.meta?.name ?? _route.name;
if (name) { if (name) {
// name // name
Component.type.name = name; Component.type.name = name;

View File

@ -10,7 +10,7 @@ export default {
layout: { layout: {
title: "Fes.js", title: "Fes.js",
footer: 'Created by MumbleFE', footer: 'Created by MumbleFE',
multiTabs: false, multiTabs: true,
navigation: 'mixin', navigation: 'mixin',
menus: [{ menus: [{
name: 'index', name: 'index',

View File

@ -77,7 +77,7 @@ export const MicroApp = defineComponent({
const appConfig = appConfigRef.value; const appConfig = appConfigRef.value;
const { name, entry } = appConfig; const { name, entry } = appConfig;
// 加载新的 // 加载新的
microAppRef.value = loadMicroApp( const app = loadMicroApp(
{ {
// 保证唯一 // 保证唯一
name: `${name}`, name: `${name}`,
@ -96,6 +96,10 @@ export const MicroApp = defineComponent({
(v1, v2) => concat(v1 ?? [], v2 ?? []) (v1, v2) => concat(v1 ?? [], v2 ?? [])
) )
); );
app.mount().catch((e)=>{
console.log(e)
})
microAppRef.value = app;
}; };
// 当参数变化时update子应用 // 当参数变化时update子应用