在组件而不是 app.js 中加载 vue 路由

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
});