vue项目动态注册组件

2019-08-16 admin

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

图片描述

[转载]原文链接:https://segmentfault.com/a/1190000020090598

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-72670.html

文章标题:vue项目动态注册组件

相关文章
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
JS动态修改图片的URL(src)的方法
本文实例讲述了JS动态修改图片的URL(src)的方法。分享给大家供大家参考。具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 &lt;!DOCTYPE html&gt; &lt;...
2017-03-22
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
回到顶部