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 

我沒有測試過這種實現，但該方法來裝載目錄下的文件是如何使用它一些地方，我有一個動態數量的組件位於一個可以隨時間變化的文件夾中（比如說更多的模塊被安裝到應用程序中，並且你不想每次都更新支持的前端代碼）。