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>

标签：vue,const,defineAsyncComponent,value,current,路由,动态,DP
来源： https://www.cnblogs.com/zjxzhj/p/16305528.html