Load vue routes in a component instead of app.js - laravel

Question

I'm using Laravel and currently, I'm loading my Vue routes in apps.js like this:
import MyComponentMain from './components/MyComponentMain.vue';
import MyComponentOne from './components/MyComponentOne.vue';
import MyComponentTwo from './components/MyComponentTwo.vue';
const routes = [
{
path: '/my-component-main',
component: MyComponentMain
},
{
path: '/my-component-one',
component: MyComponentOne
},
{
path: '/my-component-two',
component: MyComponentTwo
},
];
const router = new VueRouter({
routes
});
const app = new Vue({
el: '#app',
router: router
});
How can I move the declarations of MyComponentOne and MyComponentTwo routes to MyComponentMain.vue ?
./components/MyComponentMain.vue:
<template>
<div class="container">
<router-link
class="nav-link"
to="/my-component-one"
>
<router-link
class="nav-link"
to="/my-component-two"
>
</div>
</template>
<script>
mounted () {
console.log('Main component mounted.');
}
</script>

Answer 1

Based on your comment, you can split the routes by creating a routes folder and organise your routes by file and merge in app.js, similar to how you would do vue store modules.
/routes/MyComponentMain.vue
import MyComponentMain from './components/MyComponentMain.vue';
const componetMainRoutes = [
{
path: '/my-component-main',
component: MyComponentMain
},
];
export componetMainRoutes
/routes/MyComponentOne.vue
import MyComponentOne from './components/MyComponentOne.vue';
const componetOneRoutes = [
{
path: '/my-component-one',
component: MyComponentOne
},
];
export componetOneRoutes
/routes/MyComponentTwo.vue
import MyComponentTwo from './components/MyComponentTwo.vue';
const componnetTwoRoutes = [
{
path: '/my-component-two',
component: MyComponentTwo
},
];
export componnetTwoRoutes
and then bring them all together in app.js
import componetMainRoutes from "./routes/componetMainRoutes"
import componetOneRoutes from "./routes/MyComponentOne"
import componnetTwoRoutes from "./routes/componnetTwoRoutes"
const routes = [
...componetMainRoutes,
...componetOneRoutes,
...componnetTwoRoutes
];
const router = new VueRouter({
routes
});
const app = new Vue({
el: '#app',
router: router
});