vue-router-dynamic-loader v0.0.5

vue-router-dynamic-loader（路由组件动态组装工厂）

安装

npm i vue-router-dynamic-loader

使用：main.js加入以下代码

import vrd from 'vue-router-dynamic-loader'
Vue.prototype.$vrd = vrd

场景一：登录后或某个时候请求回来路由数据进行处理

// 模拟请求回来的路由数据
let data = {
      "code": 0,
      "msg": "查询成功",
      "data": {
        "modules": [{
              "id": "ad465a0a32a5eaad217e73b1332735d6",
              "name": "部门管理",
              "path": "dept",
              "component": "dept",
              "componentName": "system",
              "permission": "",
              "icon": "anticonbumen",
              "hidden": 0,
              "pid": "914fbd8e4ce685116f50cb20c06a9c65",
              "isDynamic": 1,  // 是否为动态组件
              "code": "dept",
              "children": [],
              "src": ["https://sxftech-file.oss-cn-shenzhen.aliyuncs.com/9be26139ae9acb7aa9d55c463aa93445.js"]
            }]
      },
      "success": true
}

// 路由组装
this.$vrd.generatorDynamicRouter(data.data.modules, []).then(res =>{
  this.$router.addRoutes(res)
});

场景二：某个事件后动态加载模块或组件

test.vue

<template>
  <div class="test">
    <button @click="add()"></button>
    <component :is="comName" />
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      comName: ""
    }
  },
  methods: {
    // 点击时加载页面并
    add(){
      this.$vrd.moduleLoader({"com002": ['http://xxxx.com002.js']}).then(res =>{
          this.comName = 'com002模块里面的组件的名字';
      })
    }
  }
}
</script>