Vue.js Vuejs大型应用程序延迟加载动态组件

我正在尝试构建一个vuejs应用程序，该应用程序将包含成百上千的“表单”或“页面”组件，这些组件都在动态

标记中交换。问题是必须导入每个组件。是否有基于管线参数动态导入组件的方法？到目前为止，我有以下内容，但它不起作用：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Hello = resolve => require(['@/components/Hello.vue'], resolve)

export default new Router({
  routes: [{
    path: '/',
    name: 'Hello',
    component: Hello
  }, {
    path: '/:name',
    name: 'Dynamic',
    component : {
      template: '<component :is="$route.params.name"></component>',
      watch: {
        '$route': function(to) {
          window[to.params.name] = resolve => require(['@/components/' + to.params.name + '.vue'], resolve)
          Vue.component(to.params.name, window[to.params.name])
          console.log(to.params.name)
        }
      }
    }
  }]
})

从“Vue”导入Vue
从“vue路由器”导入路由器
Vue.use（路由器）
const Hello=resolve=>require（['@/components/Hello.vue']，resolve）
导出默认新路由器({
路线：[{
路径：“/”，
姓名：'你好'，
组件：您好
}, {
路径：'/：名称'，
名称：“动态”，
组成部分：{
模板：“”，
观察：{
“$route”：函数（到）{
window[to.params.name]=resolve=>require（['@/components/'+to.params.name+'.vue']，resolve）
组件（to.params.name，窗口[to.params.name]）
console.log（to.params.name）
}
}
}
}]
})

一种方法，假设所有组件都存储在一个目录中（从技术上讲，只要加载程序文件抓取并导入它们，它们就可以存储在任何地方）

我还没有测试过这个实现，但加载目录文件的方法是如何在某些区域使用它，在这些区域中，文件夹中的组件数量会随着时间的推移而变化（例如，随着越来越多的模块安装到应用程序中，您不希望每次都要更新支持的前端代码）.

也许这会有帮助？另请参见SystemJS

import Vue from 'vue'
import Router from 'vue-router'
import Components from './components'

Vue.use(Router)

const Hello = resolve => require(['@/components/Hello.vue'], resolve)

export default new Router({
  routes: [{
    path: '/',
    name: 'Hello',
    component: Hello
  }, {
    path: '/:name',
    name: 'Dynamic',
    component : {
      template: '<component :is="Components[$route.params.name]"></component>'
    }
  }]
})

const files = require.context('.', false, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  modules[key.replace(/(\.\/|\.vue)/g, '')] = files(key)
})

export default modules