自动加载路由作为模块答案

【问题标题】：Autoload routes as modules自动加载路由作为模块
【发布时间】：2019-08-09 11:18:13
【问题描述】：

我已经设法为 vuex 存储文件创建了一个自动加载器，但我无法让它为 vue-router 文件工作。

我总是收到错误[vue-router] "path" is required in a route configuration.

index.js 自动加载文件

import camelCase from 'lodash/camelCase';

const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = {};

requireRoute.keys().forEach((fileName) => {
  if (fileName === './index.js') return; // reject the index.js file

  const routeName = camelCase(fileName.replace(/(\.\/|\.js)/g, '')); //

  routes[routeName] = requireRoute(fileName).default;
});

export default routes;

路由器.js

import Vue from 'vue';
import Router from 'vue-router';
import Home from '../views/Home.vue';

import routes from '@/routes/modules';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        icon: 'fa-tachometer',
        title: 'Dashboard',
        inMenu: true,
      },
    },
    routes,
  ],
});

谁能指出我正确的方向？

【问题讨论】：

标签： vue.js routes vue-router autoload

【解决方案1】：

尝试spread 你的routes 对象，这样你的主要routes 将不包含单个对象，而是一堆对象：

routes: [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      icon: 'fa-tachometer',
      title: 'Dashboard',
      inMenu: true,
    },
  },
  ...routes,
],

【讨论】：

刚试过。 Uncaught TypeError: Invalid attempt to spread non-iterable instance

【解决方案2】：

我必须将const routes = []; 和.push() 设置为数组。

所以下面的代码有效：

index.js

const requireRoute = require.context('.', false, /\.js$/); // extract js files inside modules folder
const routes = [];

requireRoute.keys().forEach((fileName) => {
  if (fileName === './index.js') return; // reject the index.js file

  routes.push(requireRoute(fileName).default);
});

export default routes;

路由器.js

import Vue from 'vue';
import Router from 'vue-router';

import routes from '@/routes/modules';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

【讨论】：