vue项目动态注册组件

更新于 2019-08-16  约 3 分钟

由于公司项目中需要后端去生成对应的文件,但是前台没有在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>

图片描述

阅读 294更新于 2019-08-16

推荐阅读
目录