[Vuejs]-Load vue routes in a component instead of app.js

0👍

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

Leave a comment