Paths in separate files with Vuejs

Question

Can I create routes in separate files in Vuejs?
I currently have this folder structure

|- main.js
|
|- Grupos
  |- grupos.vue
|- Artigos
  |- artigos.vue

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

let router = new VueRouter({
    routes: [{
        path: '/Main',
        component: require('./mainPage.vue'),
        children: [{
                path: '/Main/Grupos',
                component: require('./grupos.vue')
            },
            {
                path: '/Main/Artigos',
                component: require('./artigos.vue')
            }
        ]
    },
    {
        path: '*',
        component: require('./notFound.vue')
    }
    ]
})

const app = new Vue({router}).$mount('#container')

I was wondering if I could make mine look like this:

|- main.js
|
|- Grupos
  |- grupos.vue
  |- grupoRoutes.js
|- Artigos
  |- artigos.vue
  |- artigosRoutes.js

I know you can do it with Routes.add, but then I have to care there in my Main.JS. I wanted everything to be independent. No matter what Main.js.

Is there any way I can do that? Thank you!

Answer 1

You can use the require.context of the webpack see the documentation here.

basically their maimRutes.js will join all the default defaults of your files .+\.route.js.

basically that:

const routes = require.context('src/', true, /\.routes\.js$/)