Defining sub routes in components - vue.js

Question

I want to build a vue application with many modules. Lets say for an online shop we need modules for customers, products, stock inventory, orders, invoices. For every model we need CRUD functions (and some more).
I would prefer a structure, where I have a component for each these modules. And each module component has sub components for list, create, update, read, delete.
|- products/
| |- index.vue
| |- list.vue
| |- add.vue
| |- edit.vue
| |- view.vue
| |- delete.vue
|- customers/
| |- index.vue
| |- list.vue
| |- ...
How can I define the sub routes (children) for each module in the module (index.vue) itself and not in the main router file? Later I want to be able to share certain URLs like
https://domain.tld/products/view/12345
https://domain.tld/products/edit/12345

Answer 1

It can easily be done. Although it could be discussed whether it should be done or not - it does not really change anything, except possibly reducing the verbosity of the main router file. (In any case, the router definition must have all routes in it, so the difference is merely on the aesthetic side)
Routes are simply Javascript objects - why not doing it like below
In index.vue
const productRoutes = [
{
name: 'view',
path: 'view',
component: productView
},
{
name: 'add',
path: 'add',
component: productAdd
},
{
name: 'edit',
path: 'edit',
component: productEdit
},
]
in the router file
const routes = [
{
name: 'products',
path: '/products',
component: products,
children: productRoutes
}
]
const myRouter = new VueRouter({
routes
})
You need to of course add the appropriate import statements - you'll need
these anyway as the router always needs a reference to the components listed.
Components will then simply be defined by their option object, shown as productAdd, productView, productEdit above.