近期开发,想开发一个单页面集成多页面,于是就想到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 的页面导航
}