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()返回一个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
}

将路由动态导入Vue路由器

1 个答案: