因为项目组件过多，但是项目每个组件都是一个效果，可以单独预览，又不想每个组件都就加入到路由当中，所以设置为根据参数动态获取组件

在Vue3中，动态引入组件可以使用defineAsyncComponent函数。该函数返回一个异步组件对象，可以在组件需要渲染时再加载。

我们先通过defineAsyncComponent函数定义了一个异步组件对象MyComponent，然后将其作为一个普通组件注册到Vue实例的components选项中。

在需要渲染MyComponent组件的时候，Vue会自动加载异步组件的代码，并进行渲染。需要注意的是，由于异步组件需要加载代码，因此在第一次渲染时可能会存在一定的延迟。

完整代码

<template>
  <div class="home">
    <div class="titleDesc">{{ id }}</div>
    <div class="items2">
      <component :is="dynamicCom"/>
    </div>
  </div>
</template>
<script>


import {defineAsyncComponent} from 'vue'

export default {
  name: "home",
  components: {},
  data() {
    return {
      dynamicCom: null,
      id: this.$route.query.id
    }
  },
  mounted() {
  },
  created() {
    this.dynamicCom = defineAsyncComponent(() =>
        import(`./components/``{this.``route.query.id}/index.vue`)
    )
  },
  computed: {},
  watch: {},
  methods: {},
}
</script>