Vue3使用keepLive实现切换页面，但出现空页面现象

<template>

<div class="layout-parent">
        <router-view v-slot="{ Component,route }" >
                <transition name="el-fade-in-linear" mode="out-in">
                        <keep-alive v-if="route.meta.isCache">
                                <component :is="Component" :key="route.fullPath"/>
                        </keep-alive>
                        <component v-else :is="Component" :key="route.fullPath"/>
                </transition>
        </router-view>
</div>

</template>

这是我原先出现问题的代码，切换页面是正常的，但是切换到原先的页面时，会出现空页面现象，参考其他文章，主要是两种情况：

第一种就是在这个上面加了个注释

第二种就是router-view就作为根标签，在外面加个div包住就可以

但是这两种情况我都不满足，还是出现空页面现象。

解决后的代码：

<template>
<div class="layout-parent">
<router-view v-slot="{ Component,route }">
<!--<transition name="el-fade-in-linear" mode="out-in">-->
<keep-alive v-if="route.meta.isCache">
<component :is="Component" :key="route.fullPath"/>
</keep-alive>
<component v-else :is="Component" :key="route.fullPath"/>
<!--</transition>-->
</router-view>
</div>
</template>

<script setup lang="ts">
// 页面加载时
import {NextLoading} from "@/utils/loading";
onMounted(() => {
NextLoading.done(600);
});
const route=useRoute();
onActivated(() => {
// console.log("调用时机为首次挂载,路由地址：",route.path)
// 调用时机为首次挂载
// 以及每次从缓存中被重新插入时
})
onDeactivated(() => {
// console.log("在从 DOM 上移除、进入缓存,路由地址：",route.path)
// 以及组件卸载时调用
})
</script>

我把transition标签注释掉就没有出现空页面现象