Can i split up children routes into component files? - vue.js

Question

When learning the Vue Router on https://router.vuejs.org/, the section on nested routes shows how to declare children routes.
But the only way it shows it being possible is declaring all of them in the single Router file. So if i were to build a somewhat large app index consisting of several independent apps, and i wanted each of those apps to have routing and links pointing to whatever pages they use, then it would be inconsistent and hard to maintain if it were mandated that those routes were all to be declared in the main router config. I guess i'm looking for a more separation-of-concerns approach.
Let's say if one of my apps was a Todo App whose main component is defined in TodoApp.vue, the kind of thing i'm hoping for is that i could define all the routes for this Todo app in its .vue file, and then the main router config would import it, and treat those routes as children of the main /todo route, assuming that /todo is the path to the Todo App.
For example, let's say this is an excerpt of my Router definition, showing that Todo is one of my apps that has some subnavigation going on:
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/todo',
name: 'TodoApp',
component: Todo
children: [{
path: 'create-task',
component: TodoCreateTask,
},{
path: 'edit-tasks',
component: TodoEditTask,
},{
path: 'create-task',
component: TodoCreateTask,
}]
]
});
I am wondering if it would be possible to remove the children part from this declaration, move it into the Todo component file, and then do some kind of an import here?

Answer 1

You can simply store children routes in a separate file as a regular array, for example:
subroutes.js
// import the components that are being referenced
export default [{
path: 'create-task',
component: TodoCreateTask,
},{
path: 'edit-tasks',
component: TodoEditTask,
},{
path: 'create-task',
component: TodoCreateTask,
}]
App.vue
import subroutes from './subroutes';
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/todo',
name: 'TodoApp',
component: Todo,
children: subroutes,
}
]
});