Модульная архитектура роутинга

Vue Router предоставляет гибкий способ организации маршрутов в приложении, особенно при работе с крупными проектами, где количество страниц и функциональных блоков растёт. Модульная архитектура роутинга позволяет разбивать маршруты на отдельные файлы и компоненты, что облегчает поддержку, расширение и тестирование приложения.

Разделение маршрутов на модули

Для крупных проектов рекомендуется группировать маршруты по функциональным областям. Например, маршруты для авторизации, профиля пользователя, административной панели и публичной части приложения могут храниться в отдельных модулях.

Пример структуры проекта:

src/
 ├─ router/
 │   ├─ index.js
 │   ├─ authRoutes.js
 │   ├─ adminRoutes.js
 │   └─ publicRoutes.js

authRoutes.js содержит маршруты для входа, регистрации и восстановления пароля.
adminRoutes.js — маршруты для административной панели и управления пользователями.
publicRoutes.js — маршруты для общедоступных страниц: главная, каталог, контакты.

Каждый модуль экспортирует массив маршрутов:

// authRoutes.js
import LoginPage from '@/views/LoginPage.vue';
import RegisterPage from '@/views/RegisterPage.vue';

export default [
  { path: '/login', name: 'Login', component: LoginPage },
  { path: '/register', name: 'Register', component: RegisterPage },
];

// adminRoutes.js
import AdminDashboard from '@/views/admin/Dashboard.vue';
import UserManagement from '@/views/admin/UserManagement.vue';

export default [
  {
    path: '/admin',
    component: AdminDashboard,
    children: [
      { path: 'users', name: 'UserManagement', component: UserManagement },
    ],
  },
];

Централизованный импорт и объединение маршрутов

Главный файл маршрутизатора (index.js) импортирует все модули и объединяет их в единый массив маршрутов. Такой подход сохраняет чистоту кода и упрощает добавление новых модулей.

import { createRouter, createWebHistory } from 'vue-router';
import authRoutes from './authRoutes';
import adminRoutes from './adminRoutes';
import publicRoutes from './publicRoutes';

const routes = [
  ...publicRoutes,
  ...authRoutes,
  ...adminRoutes,
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Динамическая подгрузка модулей

Для оптимизации загрузки крупных приложений рекомендуется использовать динамический импорт компонентов. Это уменьшает начальный размер бандла и ускоряет первую загрузку страницы.

export default [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/LoginPage.vue'),
  },
  {
    path: '/admin',
    component: () => import('@/views/admin/Dashboard.vue'),
    children: [
      {
        path: 'users',
        name: 'UserManagement',
        component: () => import('@/views/admin/UserManagement.vue'),
      },
    ],
  },
];

Динамический импорт создаёт отдельные чанки, которые загружаются только при переходе на соответствующие маршруты.

Вложенные маршруты и ленивые загрузки

В модульной архитектуре часто используется комбинация вложенных маршрутов и ленивой загрузки компонентов. Родительский маршрут может содержать общий макет, а дочерние — функциональные компоненты.

{
  path: '/dashboard',
  component: () => import('@/layouts/DashboardLayout.vue'),
  children: [
    {
      path: 'profile',
      name: 'Profile',
      component: () => import('@/views/ProfilePage.vue'),
    },
    {
      path: 'settings',
      name: 'Settings',
      component: () => import('@/views/SettingsPage.vue'),
    },
  ],
}

В таком подходе DashboardLayout загружается один раз, а дочерние страницы подгружаются динамически.

Гварды маршрутов и защита модулей

Каждый модуль может содержать свои глобальные и локальные гварды маршрутов. Например, административный модуль должен проверять права пользователя перед доступом к страницам:

router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/admin') && !userIsAdmin()) {
    next('/login');
  } else {
    next();
  }
});

Можно также использовать локальные гварды на уровне отдельных маршрутов:

{
  path: '/admin/users',
  name: 'UserManagement',
  component: () => import('@/views/admin/UserManagement.vue'),
  beforeEnter: (to, from, next) => {
    if (!userIsAdmin()) next('/login');
    else next();
  },
}

Преимущества модульной архитектуры

Поддерживаемость — каждый модуль изолирован, что облегчает чтение и редактирование маршрутов.
Расширяемость — добавление новых функций не требует изменения глобального маршрутизатора.
Оптимизация загрузки — динамическая подгрузка снижает размер начального бандла.
Управление доступом — локальные и глобальные гварды позволяют гибко контролировать права пользователей.
Лёгкая интеграция с другими библиотеками — модули маршрутов можно подключать по мере необходимости.