将路由动态导入 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 expression webpack 错误。 我已经尝试过其他版本的import ，但没有任何运气。

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

Answer 1

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

require.context()返回一个上下文模块，它导出一个keys function，它返回一个包含所有可能请求（即匹配路径）的数组，每个请求都可以传递给上下文本身（调用其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
}