vue项目动态注册组件

2019-08-16

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

图片描述

原文链接:segmentfault.com

上一篇:H-项目记录-01:阿里百秀开发小结
下一篇:web xss攻击常用解决方案
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部