<template>
  <div>
    <!--is的值取自data内的属性，传值和普通组件一样-->
    <component :is="currentView" :id="businessKey"></component>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data() {
      return {
        // 默认值，可以为空
        currentView: () => import('@/test/CComponet.vue'),
      }
    },
    methods: {
      loadView(path){
        // 辅助方法，网上的说法是webpack不支持直接import变量，所以需要采用这种形式
        // 重点：如果写了@给webpack还是不能识别，那么可能你需要多些几级的路径，如import(`@/views/${path}`)
        return (resolve) => require([`@/test/${path}.vue`], resolve)
      },
      getPath(){
        someFunction({}).then(res => {
          let cStr = "AComponet.vue"
          this.currentView = this.loadView(cStr)
        })
      }
    }
  }
</script>

注意

如果写了@给webpack还是不能识别，那么可能你需要多些几级的路径，如import(@/views/${path})

难点主要是解决下面的变量动态引入问题

// 假如path = "@/views/user"
const com = () => import(path) // 这样会报错哦
const com2 = () = > import("@/views/user") // 这样写死的字符串就可以

原因应该是在webpack，webpack编译es6动态引入import()时不能传入变量，因为webpack的现在的实现方式不能实现完全动态。

To Be Continued！😎