daimp-front/main/src/layouts/index.vue

<!--
 * @Description: 
 * @Author: zenghua.wang
 * @Date: 2023-06-20 14:29:45
 * @LastEditors: zenghua.wang
 * @LastEditTime: 2025-01-25 09:28:53
-->
<template>
  <router-view v-slot="{ Component, route }">
    <transition name="fade-slide" mode="out-in" appear>
      <keep-alive v-if="isReload" :include="cacheRoutes">
        <component :is="useWrapComponents(Component, route)" :key="route.path" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup name="layout">
import { computed } from 'vue';
import { useSettingStore } from '@/store/modules/setting';
import { usePermissionStore } from '@/store/modules/permission';
import { useWrapComponents } from '@/hooks/useWrapComponents';

const SettingStore = useSettingStore();
const PermissionStore = usePermissionStore();
const cacheRoutes = computed(() => PermissionStore.keepAliveRoutes);
const isReload = computed(() => SettingStore.isReload);
</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>