Vuejs大型应用延迟加载动态组件

Question

我试图建立一个vuejs应用程序，将有成百上千的“形式”，或者说都得到动态<component is=''>标签内换出的“页面”组件。问题是必须导入每个组件。有没有办法根据路由参数动态导入组件？到目前为止，我有以下，但它不工作：

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) 
     } 
     } 
    } 
    }] 
}) 

Answer 1

一种方式做到这一点，假设所有组件都存储在一个单独的目录（在技术上，他们可以在任何地方，只要存储的加载程序文件的争夺，导入它们）。

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>' 
    } 
    }] 
}) 

内。然后./components/index.js以下假定所有组件都.vue文件：

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

export default modules 

我没有测试过这种实现，但该方法来装载目录下的文件是如何使用它一些地方，我有一个动态数量的组件位于一个可以随时间变化的文件夹中（比如说更多的模块被安装到应用程序中，并且你不想每次都更新支持的前端代码）。