What is the best way to structure routes.js (vue-router)?

Question

Vue.js

Good afternoon,
There is a SPA application with several dozen completely different pages. Are there any practices on how to better structure routes? Now it looks something like this:

import Vue from 'vue';
import Router from 'vue-router';

import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import Dashboard from './views/Dashboard.vue'
// и ещё несколько десятков импортов...

Vue.use(Router)

export const routes = [{
    path: '/',
    component: Home,
    name: '',
    leaf: true,
    iconCls: 'fa fa-desktop',
    meta: {
        'roles': ['admin', 'manager', 'support']
    },
    children: [{
        path: '/',
        component: Dashboard,
        name: 'Dashboard',
        meta: {
            'roles': ['admin', 'manager', 'support']
        }
    }]
}, {
    path: '/',
    component: Home,
    name: '',
    leaf: true,
    iconCls: 'fa fa-phone',
    meta: {
        'roles': ['admin', 'manager', 'support']
    },
    children: [{
        path: '/phone',
        component: Phone,
        name: 'Call tester',
        meta: {
            breadcrumboff: true,
            'roles': ['admin', 'manager', 'support']
        }
    }]
},
// итд..
}];

export const router = new Router({
    routes
});

As a result, the file looks very massive due to a bunch of imports at the beginning. How can this be optimized?

Answer 1

As an option, make an index.js file in the views folder, import all components there, and then do in the router file: import './views'. If desired, the router file can also be divided into parts and imported from different files.