自动加载路由作为模块

Question

我已经设法为 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;

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

谁能指出我正确的方向？

Answer 1

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

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

Answer 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;

router.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,
});

自动加载路由作为模块

Autoload routes as modules

vue.js

routes

vue-router

autoload