將路由動態導入 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
}