Vue3＜keep-alive＞ 静态加载+动态载入实现保持状态

近期开发，想开发一个单页面集成多页面，于是就想到dialog内嵌组件，但是想把每一个组件的状态保存下来，于是查阅资料发现keep-alive组件可以实现缓存，但是遇到很多坑。

  <el-dialog v-model="DialogVisible" title="Warning" center style="height: 80%;width: 80%" :close-icon="CircleCloseFilled" >
    <keep-alive>
      <component :is="currentPage"/>
    </keep-alive>
  </el-dialog>

import Page1 from '@/views/page1.vue';
import Page2 from '@/views/page2.vue';
// 弹出所需页面
const DialogVisible = ref<Boolean>(false)
const currentPage = ref(null as any);
const goToPage = (droppedItems: null|string) => {
  DialogVisible.value = true
  if(droppedItems=='tianxian'){
    currentPage.value = Page1;
  }
  else if(droppedItems=='SSC024'){
    currentPage.value = Page2;
  }
  // 跳转逻辑可以是 vue-router 的页面导航
}

错误写法：动态加载+动态载入

// 弹出所需页面
const DialogVisible = ref<Boolean>(false)
const currentPage = ref(null as any);
const goToPage = (droppedItems: null|string) => {
  DialogVisible.value = true
  if(droppedItems=='tianxian'){
    currentPage.value = defineAsyncComponent(() => import('@/views/page1.vue'));
  }
  else if(droppedItems=='SSC024'){
    currentPage.value = defineAsyncComponent(() => import('@/views/page2.vue'));
  }
  // 跳转逻辑可以是 vue-router 的页面导航
}