Vue.js 在组件中定义子管线

我想用许多模块构建一个vue应用程序。比如说，对于在线商店，我们需要客户、产品、库存、订单、发票等模块。对于每个模型，我们都需要CRUD函数（以及更多）

我更喜欢一种结构，其中每个模块都有一个组件。每个模块组件都有用于列表、创建、更新、读取、删除的子组件

|- products/
|  |- index.vue
|  |- list.vue
|  |- add.vue
|  |- edit.vue
|  |- view.vue
|  |- delete.vue
|- customers/
|  |- index.vue
|  |- list.vue
|  |- ...

如何在模块（index.vue）本身而不是主路由器文件中为每个模块定义子路由（子路由）？以后我希望能够共享某些URL，如

---

这件事很容易做到。尽管可以讨论是否应该这样做，但除了可能减少主路由器文件的冗长之外，它并没有真正改变任何事情。（在任何情况下，路由器定义中必须包含所有路由，因此差异仅限于美观方面）

路由只是Javascript对象——为什么不像下面这样做呢

在index.vue中

const productRoutes = [
  {
    name: 'view',
    path: 'view',
    component: productView
  }, 
  {
    name: 'add',
    path: 'add',
    component: productAdd
  }, 
  {
    name: 'edit',
    path: 'edit',
    component: productEdit
  }, 
]

在路由器文件中

const routes = [
  {
    name: 'products',
    path: '/products',
    component: products,
    children: productRoutes
  }
]

const myRouter = new VueRouter({    
   routes
})

当然，您需要添加适当的导入语句-您需要 因为路由器总是需要对列出的组件进行引用，所以这些都是必需的

组件将简单地由它们的选项对象定义，上面显示为productAdd、productView和productEdit