Vue中如何新增独立路由配置文件并引入？引入后报path缺失如何修复

• routesManagement.js导出的是路由配置数组，而非单个路由配置对象，你在主路由的routes数组中直接将其作为元素写入，会导致最终的路由配置出现嵌套数组结构，不符合Vue Router的要求：

  // 你当前实际得到的routes结构
  const routes = [
    { path: '/', name: 'Dashboard', component: Dashboard },
    [ { path: '/tools', name: 'Tools', component: Tools } ] // 嵌套的数组没有path属性，触发报错
  ]
  

• Vue Router遍历路由配置时，遇到第二层的数组元素无法读取到path属性，就会抛出你遇到的错误。

你可以根据自己的业务需求二选一：

方案1：直接平铺路由到主配置（最常用，对应你原本的需求） #

使用ES6扩展运算符将导入的路由数组展开，把内部的路由项平铺到主routes数组的同级，修改router.js的routes定义即可：

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  // 展开导入的路由数组
  ...routesManagement,
]

方案2：作为子路由挂载到父路由下 #

如果你需要把routesManagement内的所有路由统一归到一个父级路由下，比如都放在/management路径下，就将其写入父路由的children字段：

const routes = [
  {
    path: '/',
    name: 'Dashboard',
    component: Dashboard
  },
  {
    path: '/management',
    component: 你的父布局组件, // 按需替换成对应的父级组件
    children: routesManagement
  }
]

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