Question

我正在尝试构建一个vuejs应用程序，该应用程序将有数百个（如果不是数千个）＆＃34;形式＆＃34;或者＆＃34;页面＆＃34;所有在动态<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

我还没有测试过这个实现，但是加载目录文件的方法是我在一些区域中使用它的方法，在这些区域中我有一个动态数量的组件位于一个可以随时间变化的文件夹中（比如说更多）模块安装到应用程序中，您不希望每次都更新支持前端代码。

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

1 个答案: