Dynami c импорт маршрутов в Vue роутер

Question

Я создаю Vue приложение для начинающих для платформы, и оно будет использовать стандартную структуру каталогов для создания всех элементов, необходимых для ресурса (.vue файлы, маршруты, модули хранилища Vuex и т. Д. * 1028). *). Я хотел бы воспользоваться этой известной структурой для динамической загрузки объектов пути маршрутизатора, чтобы пользователю не приходилось вручную добавлять маршруты в файл индекса маршрутизатора.

Например, вот пример структуры каталогов:

/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 ошибку веб-пакета. Я безуспешно пробовал другие версии import.

Можно ли сделать то, что я пытаюсь сделать с импортом динамического c?

Answer 1

Нет смысла использовать import() вместе с require.context(), так как последний уже обеспечивает импорт. Учитывая ваш вариант использования, вам нужно только require.context().

require.context(), который возвращает контекстный модуль , который экспортирует функцию 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
}