将路由动态导入到Vue路由器中

Question

我正在为平台创建一个 Vue 入门套件应用程序，它将使用标准目录结构来创建资源所需的所有项目（.vue文件、路由、Vuex 存储模块等）。我想利用这个已知的结构来动态加载路由器路径对象，这样用户就不必手动将路由添加到路由器索引文件中。

例如，下面是一个示例目录结构：

/src
  |
  ---resources
         |
         -------user
                  |
                   ---User.vue
                   ---routes.js
                   ---store.js
                event
                  |
                   ---Event.vue
                   ---routes.js
                   ---store.js
                job
                  |
                   ---Job.vue
                   ---routes.js
                   ---store.js 

文件的内部routes.js如下所示：

import Event from '@/resources/event/Event'

export default [
  {
    path: '/events',
    name: 'event',
    component: Event
  },
];

要在标准路由器文件（router.js或router/index/js）中手动执行此操作，您可以执行以下操作：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Auth from '@/components/Auth';
import eventRoutes from '@/resources/event/routes.js';
import userRoutes from '@/resources/user/routes.js';
import jobRoutes from '@/resources/job/routes.js';

Vue.use(Router);

let baseRoutes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'auth',
    component: Auth
  },
];

const routes = baseRoutes.concat(shiftCalendarRoutes)
  .concat(eventRoutes)
  .concat(userRoutes)
  .concat(jobRoutes);
export default new Router({
    mode: 'history',
    routes,
})

我真正想做的是：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Auth from '@/components/Auth';

Vue.use(Router);

let routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'auth',
    component: Auth
  },
];

function loadRoutes() {
  const routes = require.context('@/resources', true, /routes.js$/i);
  routes.keys().forEach((key) => {
    const path = '@/resources/' + key.substring(2);
    // Dynamically import file using import statement
    import something from path;
    // Add imported default object to routes object.
  });
  return routesList;
}

export default new Router({
    mode: 'history',
    routes,
})

我遇到的问题是实际的导入。当我尝试类似的事情时

routeItems.keys().forEach((key) => {
    // routesList.push('@/resources/' + key.substring(2));
    const path = '@/resources/' + key.substring(2);
    const routeModule = import(path).default();
  });

我收到Critical dependency: the request of a dependency is an expressionwebpack 错误。我尝试过其他版本但import没有任何运气。

是否可以通过动态导入来完成我想要做的事情？

Answer 1

import()与 一起使用并没有什么意义require.context()，因为后者已经提供了导入。考虑到您的用例，您只需要require.context().

require.context()返回一个context module，它导出一个keys函数，该函数返回所有可能的请求（即匹配路径）的数组，每个请求都可以传递给上下文本身（调用其resolve函数）以导入相应的模块：

function loadRoutes() {
  const context = require.context('@/resources', true, /routes.js$/i)
  return context.keys()
    .map(context)         // import module
    .map(m => m.default)  // get `default` export from each resolved module
}