Конструктор Navigo

Navigo — это лёгкая библиотека для маршрутизации в JavaScript, предназначенная для управления навигацией в одностраничных приложениях (SPA). Центральным элементом является конструктор Navigo, который создаёт объект роутера и предоставляет методы для настройки маршрутов и обработки переходов.

import Navigo from 'navigo';

const router = new Navigo('/');

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

  • root (строка) — корневой путь приложения. По умолчанию '/'. Используется для корректной обработки маршрутов, если приложение находится не в корне домена.
  • useHash (булевый) — указывает, следует ли использовать хэш-маршрутизацию (true) или HTML5 History API (false). Значение по умолчанию false.
  • hash (строка) — определяет префикс хэша, например '#' или '#!'. Применимо только при useHash = true.

Пример создания роутера с хэш-навигацией:

const router = new Navigo('/', true, '#!');

Настройка маршрутов

Метод on используется для привязки обработчиков к маршрутам. Он принимает путь и функцию-обработчик.

router.on('/home', () => {
    console.log('Главная страница');
});

router.on('/about', () => {
    console.log('О странице');
});

Поддержка параметров маршрута осуществляется с помощью двоеточия ::

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

Можно задавать несколько маршрутов сразу:

router.on({
    '/home': () => console.log('Главная'),
    '/about': () => console.log('О сайте')
});

Для маршрутов по умолчанию используется * или метод notFound:

router.notFound(() => {
    console.log('Страница не найдена');
});

Обработка навигации

Метод navigate(path) инициирует переход на указанный маршрут:

router.navigate('/about');

Если включена хэш-навигация, URL автоматически обновляется с префиксом хэша.

Метод resolve() позволяет вручную запустить обработку текущего URL, что полезно при динамическом изменении маршрутов:

router.resolve();

Использование hooks и middleware

Navigo поддерживает хуки before и after, которые вызываются до и после обработки маршрута.

router.on('/dashboard', () => {
    console.log('Панель управления');
}).before(() => {
    console.log('Проверка авторизации...');
    return true; // или false для блокировки перехода
}).after(() => {
    console.log('Маршрут обработан');
});

Хуки позволяют реализовать:

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

Настройка роутера с параметрами и регулярными выражениями

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

router.on('/product/:id(\\d+)', ({ data }) => {
    console.log(`ID продукта: ${data.id}`);
});

Параметр :id будет соответствовать только числовым значениям.

Для необязательных параметров используется знак ?:

router.on('/search/:query?', ({ data }) => {
    console.log(`Запрос поиска: ${data.query || 'пусто'}`);
});

Программное управление роутером

Методы объекта роутера:

  • updatePageLinks() — сканирует ссылки на странице с атрибутом href и автоматически привязывает их к Navigo. Позволяет работать без перезагрузки страницы.
  • destroy() — удаляет все обработчики маршрутов и возвращает роутер в исходное состояние.
  • pause() и resume() — приостанавливают и возобновляют обработку маршрутов.
router.updatePageLinks();
router.pause();
router.resume();

Группировка маршрутов и вложенные роуты

Navigo поддерживает создание групп маршрутов, что удобно для структурированных SPA.

router.on({
    '/admin/users': () => console.log('Список пользователей'),
    '/admin/settings': () => console.log('Настройки администратора')
});

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

const adminRoutes = {
    '/users': () => console.log('Пользователи'),
    '/settings': () => console.log('Настройки')
};

router.on('/admin/*', ({ url }) => {
    const path = url.replace('/admin', '');
    adminRoutes[path]?.();
});

Интеграция с History API

При использовании HTML5 History API маршруты работают без хэшей. Навигация обновляет URL через pushState без перезагрузки страницы. Это делает приложение ближе к классическим многостраничным сайтам с сохранением возможности SPA.

const router = new Navigo('/', false);
router.on('/profile', () => console.log('Профиль пользователя'));
router.navigate('/profile');

Метод navigate() автоматически обновляет URL и вызывает соответствующий обработчик.

Итоговые особенности конструктора Navigo

  • Простое создание роутера с минимальной настройкой.
  • Поддержка хэш и HTML5 History API.
  • Параметры маршрута и регулярные выражения.
  • Хуки before и after для промежуточной логики.
  • Группировка и вложенные маршруты.
  • Методы управления роутером: navigate, resolve, updatePageLinks, destroy, pause, resume.

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

Оглавление