Как лучше структурировать routes.js (vue-router)?

Question

[tridcatij]

Добрый день,

Имеется SPA приложение с несколькими десятками совершенно разных страниц. Есть ли какие-то практики как лучше структурировать роуты? Сейчас это выглядит примерно так:

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

Как итог, файл выглядит очень массивно за счёт кучи импортов вначале. Как это можно оптимизировать?

Answer 1

[Evgeny Kulakov]

Как вариант сделать файл index.js в папке views, туда импортировать все компоненты, и далее в файле роутера сделать: import './views'. По желанию файл роутера тоже можно разбить на части и импортировать из разных файлов.

Comments

[Klein Maximus]

Хотел написать то же самое.

[tridcatij]

В index.js формат такой
export { default as Login } from './Login.vue'
или такой?
import Login from './Login.vue'

И так, и так пишет, что Login is not defined

[Evgeny Kulakov]

tridcatij, индекс куда поместили? В папку views? Если у вас компоненты лежат непосредственно в views, то по идее: import Login from './Login.vue'

[tridcatij]

Да, в папку views.

// views/index.js
import Login from './Login.vue'
import NotFound from './404.vue'
// ..etc

// routes.js
import Vue from 'vue';
import Router from 'vue-router';

import './views'
...

[Evgeny Kulakov]

tridcatij, хм.. может я что-то упускаю из виду. Попробуйте вот так еще:

// views/index.js
import Login from './Login.vue'
import NotFound from './404.vue'

export default {Login, NotFound}

// routes.js
import Vue from 'vue';
import Router from 'vue-router';

import {Login, NotFound} from './views'

[tridcatij]

Evgeny Kulakov, так работает, хотя опять же получается в routes.js простыня, хоть и короче.

index.js немного изменил, чтобы избавиться от последней строчки:

export { default as Login } from './Login.vue'
export { default as NotFound } from './404.vue'

[Evgeny Kulakov]

А если теперь вот так в роутере:
import * from './views'

[tridcatij]

Evgeny Kulakov, так при компиляции выдаёт ошибку

import * from './views'
|          ^

Возможно, что-то можно поправить в вебпаке, но я там не силён.

[Evgeny Kulakov]

tridcatij, тут наверное мой косяк, без имени не прокатит:
import * as views from './views'
но тоже не самое красивое решение.