vue动态路由

<template>
  <div>
    <component
      :is="currentCompoent['TP']"
    ></component>
     <component
      :is="currentCompoent['DP']"
    ></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, defineAsyncComponent, markRaw } from 'vue'
export default defineComponent({
  name: 'AboutView',
  components: {
  },
  setup () {
    const currentName:any = ref()
    const currentCompoent:any = reactive({
      TP: markRaw(defineAsyncComponent(() => import('../components/AaPage.vue'))),
      DP: markRaw(defineAsyncComponent(() => import('../components/BbPage.vue')))
    })
    const current = ref('DP')
    onMounted(() => {
      if (current.value === 'DP') {
        current.value = 'TP'
        return
      }
      if (current.value === 'TP') {
        current.value = 'DP'
      }
    })
    return { currentCompoent, current, currentName }
  }
})
</script>
<style lang="less" scoped>

</style>


便利数组
<template>
  <div>
    <div v-for="(i,v) in dsfsdf" :key="v">
        <component :abc="i.page" :is="i.name"></component>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, defineAsyncComponent, markRaw, onMounted } from 'vue'
export default defineComponent({
  name: 'AboutView',
  components: {
  },
  setup () {
    const currentName = ref()

    const dsfsdf = ref()
    onMounted(() => {
      const arrdata = ['AaPage', 'BbPage']
      const sdfsdfsddf: { page: number; name: any }[] = []
      arrdata.forEach((res, index) => {
        dsfsdf.value.push(
          {
            page: index + 1,
            name: markRaw(defineAsyncComponent(() => import(`../components/${res}.vue`)))
          }
        )
        console.log(sdfsdfsddf)
        dsfsdf.value = sdfsdfsddf
      })
    })
    return { currentName, dsfsdf }
  }
})
</script>
<style lang="less" scoped>

</style>