vent-template/src/layouts/page/index.vue

<template>
  <div class="page">
    <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">
          <Suspense>
            <!-- <component :is="Component" :key="route.fullPath" /> -->
            <component :is="Component" :key="route.path" />
          </Suspense>
        </keep-alive>
        <Suspense v-else>
          <!-- <component :is="Component" :key="route.fullPath" /> -->
          <component :is="Component" :key="route.path" />
        </Suspense>

        <!--      </transition>-->
      </template>
    </RouterView>
    <FrameLayout v-if="getCanEmbedIFramePage" class="test" />
  </div>
</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(() => {
        return unref(getOpenKeepAlive) && unref(getShowMultipleTab);
      });

      const getCaches = computed((): string[] => {
        if (!unref(getOpenKeepAlive)) {
          return [];
        }
        return tabStore.getCachedTabList;
      });

      return {
        getTransitionName,
        openCache,
        getEnableTransition,
        getBasicTransition,
        getCaches,
        getCanEmbedIFramePage,
      };
    },
  });
</script>
<style scoped lang="less">
  .page {
    height: 100%;
  }
</style>