Vue3.0+vite2 implements dynamic asynchronous component lazy loading

<template>
 <p @click="onChangeContents('./pages/contents/gp/gp.vue')">Guo Pei</p>
 <p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">System parameters</p>
 <p>{{currentTabComponent}}</p>
 <!-- <Suspense> -->
 <component :is="DefineAsyncComponent({
     //Factory function loader: Modeuls[currentTabComponent],
     // // Default value: Infinity (i.e. never time out, unit: ms)
     timeout: 3000,
    })"></component>
 <!-- </Suspense> -->
</template>
<script lang="ts">
 import {
  defineComponent,
  defineAsyncComponent,
  reactive,
  ref
 } from 'vue'
 export default defineComponent({
  name: 'App',
  setup() {
   //vite loads all modules of the specified path const Modeuls = import.meta.glob('./pages/contents/*/*');
   const onChangeContents = function(URL) {
    currentTabComponent.value = URL;
    console.log(currentTabComponent)
   }
   let currentTabComponent = ref('./pages/contents/systemManges/xtcs.vue');
   const DefineAsyncComponent = defineAsyncComponent;
   return {
    DefineAsyncComponent,
    currentTabComponent,
    onChangeContents,
    Modeuls
   }
  },
 })
</script>