Группировка маршрутов

В библиотеке Navigo группировка маршрутов позволяет структурировать маршруты приложения, объединяя их по общим признакам, например, по части URL, по функционалу или по схожим условиям. Это особенно полезно для крупных SPA, где количество маршрутов может быть значительным. Группировка упрощает управление маршрутизатором и делает код более читаемым и поддерживаемым.

const router = new Navigo('/');

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

Метод `on` с массивом маршрутов

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

router.on(['/home', '/about', '/contact'], () => {
  console.log('Одинаковая обработка для всех указанных маршрутов');
});

Преимущества такого подхода:

Сокращение повторяющегося кода.
Легкая модификация обработчиков для группы маршрутов.

Вложенные маршруты через `navigate` и контексты

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

router.on('/user/:id', ({ data }) => {
  console.log('ID пользователя:', data.id);
});

router.on('/user/:id/settings', ({ data }) => {
  console.log('Настройки пользователя с ID:', data.id);
});

Особенности вложенных маршрутов:

:id является динамическим сегментом.
Маршруты с общим префиксом можно группировать логически, оставляя обработчики независимыми.
Внутри обработчика доступны параметры маршрута через объект data.

Использование объекта для группировки

Можно создавать группы маршрутов через объект, где ключи — это маршруты, а значения — обработчики. Такой подход упрощает массовое добавление маршрутов и позволяет структурировать код.

router.on({
  '/home': () => console.log('Главная страница'),
  '/about': () => console.log('О нас'),
  '/contact': () => console.log('Контакты')
});

Преимущества:

Явная структура маршрутов.
Возможность централизованного управления обработчиками.
Легко расширять и модифицировать отдельные маршруты внутри группы.

Группировка через регулярные выражения

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

router.on(/^\/product\/\d+$/, () => {
  console.log('Маршрут продукта с числовым идентификатором');
});

Особенности:

Позволяет объединять маршруты по динамическим условиям.
Гибкость при работе с параметрами, которые не вписываются в стандартные шаблоны.
Совместим с другими методами группировки, включая массивы и объекты.

Использование `hooks` для группы маршрутов

Navigo позволяет применять хуки (before, after) к группе маршрутов, что облегчает выполнение общих действий перед или после срабатывания маршрутов.

router.on(['/dashboard', '/profile', '/settings'], () => {
  console.log('Доступ к защищенным страницам');
}).before((done, params) => {
  if (!isAuthenticated()) {
    router.navigate('/login');
  } else {
    done();
  }
});

Преимущества хуков для групп:

Контроль доступа к нескольким маршрутам одновременно.
Возможность выполнять асинхронные проверки перед обработкой.
Централизованная обработка ошибок и редиректов.

Пример комплексной группировки

router.on({
  '/dashboard': () => console.log('Панель пользователя'),
  '/profile/:id': ({ data }) => console.log('Профиль пользователя', data.id),
  '/profile/:id/settings': ({ data }) => console.log('Настройки пользователя', data.id)
}).before((done) => {
  if (!userLoggedIn()) {
    router.navigate('/login');
  } else {
    done();
  }
});

В этом примере объединены маршруты профиля и панели пользователя с общей проверкой авторизации через хук before. Такой подход обеспечивает чистоту кода и единообразное управление доступом.

Группировка маршрутов

Метод on с массивом маршрутов

Вложенные маршруты через navigate и контексты