Vue Router自动加载路由模块失败，提示‘path’必填问题求助

咱们直接定位问题根源，一步步来修复：

1. 自动加载模块的路由容器类型错误 #

你当前在routes/modules/index.js里把routes定义成了对象，但Vue Router的路由配置要求是数组，而且你还注释掉了导入路由模块的关键代码，导致最后导出的是空对象，这直接触发了报错。

修改你的routes/modules/index.js：

import camelCase from 'lodash/camelCase';
const requireRoute = require.context('.', false, /\.js$/); 
// 把对象改成数组，匹配Vue Router的要求
const routes = [];

requireRoute.keys().forEach((fileName) => {
  if (fileName === './index.js') return; 
  // 导入每个路由模块的默认导出内容
  const routeConfig = requireRoute(fileName).default;
  
  // 兼容模块导出单个路由对象或多个路由数组的情况
  if (Array.isArray(routeConfig)) {
    routes.push(...routeConfig);
  } else {
    routes.push(routeConfig);
  }
});

export default routes;

2. 在Router配置中正确合并自动加载的路由 #

你当前在router.js里把整个routes对象直接塞进了路由数组，这相当于在路由列表里添加了一个不符合格式的对象（没有path属性），自然会触发Vue Router的校验错误。

修改你的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,
  ],
});

错误原因说明 #

• 原来的index.js导出的是空对象，当你把这个对象放到routes数组里时，Vue Router会把它当作一个路由配置项校验，但这个对象没有path属性，所以抛出了"path is required"的错误。
• 同时，Vue Router的routes选项必须是数组类型，你之前用对象存储路由不符合要求，改成数组才能正确合并所有路由配置。

内容的提问来源于stack exchange，提问作者Kazuto