vue项目动态注册组件

由于公司项目中需要后端去生成对应的文件，但是前台没有在router.js中写上对应的路由路径，导致与无法跳转的问题。
网上动态注册组件的方法不一，试过之后发现以下的方法可行性最高，内容简介易懂，大家可以参考一下。
总体的思路是：
新增的一个空白页面open.vue当做路径跳转页面，在open.vue中动态注册一个子组件进行显示。

<template>
    <div id="eqpriview"></div>
</template>
<script>
  import Vue from 'vue';
  export default {
    data () {
      return {
        eqName: ''
      }
    },
    created() {
      let id = localStorage.getItem('id')  // 文件的名称是我传给后台通过id生产的
      let did = localStorage.getItem('did')
      this.eqName = 'eqprview_' + id + '_' + did; // 进行当前后台生成文件名的拼接
    },
    mounted() {
      this.registerComponent(this.eqName,'eqpriview') // 执行动态注册组件函数
    },
    methods:{
      registerComponent(templateName,id) {
        return import('./' + templateName + '.vue').then(component => {
          let constructor = Vue.extend(component.default);
          let instance = new constructor();
          // 挂载到DOM元素在对应的ID上
          instance.$mount('#' + id);
          console.log(templateName + " 加载成功");
        });
      }
    }
  }
</script>