<template>
|
<RouterView>
|
<template #default="{ Component, route }">
|
<!-- <transition-->
|
<!-- :name="-->
|
<!-- getTransitionName({-->
|
<!-- route,-->
|
<!-- openCache,-->
|
<!-- enableTransition: getEnableTransition,-->
|
<!-- cacheTabs: getCaches,-->
|
<!-- def: getBasicTransition,-->
|
<!-- })-->
|
<!-- "-->
|
<!-- mode="out-in"-->
|
<!-- appear-->
|
<!-- >-->
|
<keep-alive v-if="openCache" :include="getCaches">
|
<component :is="Component" :key="route.fullPath" />
|
</keep-alive>
|
<component v-else :is="Component" :key="route.fullPath" />
|
<!-- </transition>-->
|
</template>
|
</RouterView>
|
<FrameLayout v-if="getCanEmbedIFramePage" />
|
</template>
|
|
<script lang="ts">
|
import { computed, defineComponent, unref } from 'vue';
|
|
import FrameLayout from '/@/layouts/iframe/index.vue';
|
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
|
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
|
import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
|
import { getTransitionName } from './transition';
|
|
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
|
export default defineComponent({
|
name: 'PageLayout',
|
components: { FrameLayout },
|
setup() {
|
const { getShowMultipleTab } = useMultipleTabSetting();
|
const tabStore = useMultipleTabStore();
|
|
const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
|
|
const { getBasicTransition, getEnableTransition } = useTransitionSetting();
|
|
const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
|
|
const getCaches = computed((): string[] => {
|
if (!unref(getOpenKeepAlive)) {
|
return [];
|
}
|
return tabStore.getCachedTabList;
|
});
|
|
return {
|
getTransitionName,
|
openCache,
|
getEnableTransition,
|
getBasicTransition,
|
getCaches,
|
getCanEmbedIFramePage,
|
};
|
},
|
});
|
</script>
|
