vue2 单页面内如何动态引入组件 兼容webpack版本低的情况

在开发大型项目中如果一个页面引入多个组件代码会非常臃肿，会让我们用许多v-if ref来控制页面显示比如下面这种情况，后期维护会很麻烦

这个时候就需要使用动态异步引入组件的方式

因为我的webpack版本较低所以采用require方式 而非import ，不然的话会报错

computed: {
      loader() {
         // this.recordType 是文件名
         return  () =>  resolve =>                  
         require([`@/views/myApproval/components/${this.recordType}`],resolve)
      },
    },

 在vue的计算属性中加入上方代码，每次触发该方法时引入的路径都会根据 this.recordType而改变

引入的文件名需要与 this.recordType 一致

// 在要执行的方法内加入该代码
// 将要引入的路径赋给 component 然后进行绑定
 this.component = this.loader()

最后使用component 组件  :is中的component 就是引入的路径，一个ref就可以调用组件内的方法

上面那些 代码都可以删掉了不需要用多个 v-if来控制