Динамически генерирующие маршруты Vue маршрутизатора из структуры каталогов

Я работаю над Vue Starter Kit для платформы JavaScript, которую я использовал в течение нескольких лет, и у меня есть необходимость – ну желание сделать его максимально легким для разработчика – для автоматического импорта определений маршрута от Несколько местоположений и добавьте их в определение маршрутизатора () вместо их загрузки всех из файла индекса маршрутизатора.

В таких приложениях, как приложения Vue, которые имеют несколько типов файлов, которые используются вместе для создания приложения, в первую очередь есть два способа организовать файлы. Например, в Vue скажем, что у нас есть несколько ресурсов, и каждый ресурс имеет три компонента:

1. Компонент (.vue file)
2. Файл определения маршрутизатора
3. Файл модуля Vuex

Вы можете выбрать организовать свои файлы двумя разными способами:

• По функциям – каждый каталог имеет файл .vue, файл маршрутизатора и файл vuex.
• По функциям – один каталог каждый для компонентов, один для файлов маршрутизатора и один для файлов vuex.

В моем случае я собираюсь группировать по функциям, которую я буду ссылаться на ресурс (чтобы соответствовать Конвенции об именах платформы). Используя примерные ресурсы, пользователя, события и задания, это будет мою структуру каталогов:

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

Содержание Marross.js Файл будет выглядеть так:

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

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

В том числе дополнительные Auth.vue Компонент (который находится за пределами каталога /Resources ), наш файл индекса базового маршрутизатора будет выглядеть следующим образом:

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
  },
];

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';
import Event from '@/resources/event/Event';
import Job from '@/resources/job/Job';
import User from '@/resources/user/User'; 

Vue.use(Router);

let routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'auth',
    component: Auth
  },
  {
    path: '/events,
    name: 'event',
    component: Event
  },
  {
    path: '/Job',
    name: 'job',
    component: Job
  },
  {
    path: '/user',
    name: 'user',
    component: User
  },
];

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 baseRoutes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/login',
    name: 'auth',
    component: Auth
  },
];

// Import all of the resource routes files.
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
}

const resourceRoutes = loadRoutes();
resourceRoutes.forEach((route) => {
  routes.push(route[0]);
});

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

Волшебство происходит в loadroutes () функция. Как описано для меня в Ответьте на мой столбец POST , require.context () Возвращает контекстный модуль, который экспортирует Ключи Функция, которая возвращает массив всех возможных запросов (то есть соответствующих путей), каждый из которых может быть передан в сам контекст (который вызывает его функцию разрешения) для импорта соответствующего модуля. Возвращенный массив из loadroutes () Функция выглядит так:

resourceRoutes = [
  {
    0: [
          {
            path: "/event",
            name: "event",
           component: {
             name: "Event",
             ...
           }
        ]
  },
  {
    1: [
          {
            path: "/jobs",
            name: "job",
           component: {
             name: "Job",
             ...
           }
        ]
  },
...
]

Поэтому я просто петлю через каждый возвращенный элемент, получите первый элемент массива и добавьте его на массив маршрутов. И вуаля!, Это сделано.

Есть пара по преимуществам этого подхода. Во-первых, он поддерживает мой код модуляризованным и сохраняет мой основной файл маршрутизатора от получения все больше и более загроможден. Во-вторых, это выглядит на будущее; Вниз по дороге, я буду создавать плагин Vue CLI, который позволит пользователю добавлять все необходимые файлы для нового ресурса, который был добавлен на платформу, и легче создать новый файл с заранее определенным Содержимое, чем это для изменения содержимого существующего файла.

Оригинал: “https://dev.to/wonder95/dynamically-generating-vue-router-routes-from-directory-structure-1g8”