Управление переходами

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

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });
  • Первый параметр конструктора задаёт базовый путь (root).
  • Опция hash: true позволяет использовать маршрутизацию через хеши (#/path), что упрощает работу на статических серверах.

Маршруты задаются методом .on(path, handler).

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

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

Параметры маршрутов

Маршруты могут содержать динамические параметры, которые передаются в обработчик как объект.

router.on('/user/:id', (params) => {
    console.log(`Пользователь с ID: ${params.id}`);
});
  • :id — динамический сегмент пути.
  • В обработчик автоматически передаётся объект params, где ключи соответствуют именам сегментов.

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

router.on('/product/:category/:id', (params) => {
    console.log(`Категория: ${params.category}, ID: ${params.id}`);
});

Управление переходами

Метод navigate

Для программного перехода между маршрутами используется метод navigate(path):

router.navigate('/about');
  • Переход обновляет URL и вызывает соответствующий обработчик маршрута.
  • Можно использовать опцию replace: true, чтобы заменить текущую запись в истории браузера, не создавая новую:
router.navigate('/home', { replace: true });

Метод resolve

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

router.resolve();
  • Вызывает обработчик текущего маршрута.
  • Полезно при инициализации приложения, чтобы отобразить страницу, соответствующую URL.

События и хуки

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

before

Хук before выполняется перед переходом:

router.hooks({
    before: (done, params, route) => {
        console.log(`Переход на маршрут: ${route.url}`);
        done(); // продолжить переход
    }
});
  • done — функция, которую необходимо вызвать для продолжения маршрутизации.
  • Можно реализовать проверку авторизации, асинхронную загрузку данных или подтверждение перехода.

after

Хук after срабатывает после успешного перехода:

router.hooks({
    after: (params, route) => {
        console.log(`Завершён переход на ${route.url}`);
    }
});
  • Отлично подходит для аналитики, отслеживания событий или обновления состояния интерфейса.

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

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

router.on({
    '/admin': () => console.log('Панель администратора'),
    '/admin/users': () => console.log('Управление пользователями'),
    '/admin/settings': () => console.log('Настройки')
});
  • Использование объекта вместо отдельных .on упрощает регистрацию нескольких маршрутов.
  • Вложенные маршруты позволяют строить сложные интерфейсы с дочерними страницами.

Необязательные параметры и регулярные выражения

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

router.on('/blog/:id?', (params) => {
    if (params.id) {
        console.log(`Статья ${params.id}`);
    } else {
        console.log('Список статей');
    }
});

Также можно использовать регулярные выражения для ограничения допустимых значений:

router.on('/order/:id(\\d+)', (params) => {
    console.log(`Заказ с номером ${params.id}`);
});

Программное управление историей браузера

Navigo взаимодействует с History API, что позволяет управлять состоянием переходов:

  • router.navigate(path, { replace: true }) — заменяет текущую запись.
  • router.navigate(path) — добавляет новую запись в историю.
  • Можно подписываться на изменения истории через событие popstate, если требуется кастомная логика:
window.addEventListener('popstate', () => {
    router.resolve();
});

Роутинг с асинхронной загрузкой

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

router.on('/dashboard', async () => {
    const module = await import('./dashboard.js');
    module.renderDashboard();
});
  • Асинхронный маршрут позволяет загружать тяжелые модули только при необходимости.
  • Поддерживаются хуки before, чтобы показывать спиннер или выполнять авторизацию до загрузки контента.

Навигация с редиректами

Редиректы реализуются через метод navigate или через маршруты с колбэком:

router.on('/old-page', () => {
    router.navigate('/new-page');
});
  • Удобно при изменении структуры приложения или объединении страниц.
  • Можно комбинировать с хуком before для условной логики редиректа.

Ключевые практики управления переходами

  1. Использовать navigate для программного перехода между страницами без перезагрузки.
  2. Обрабатывать динамические параметры через объект params.
  3. Подключать хуки before и after для контроля переходов и побочных эффектов.
  4. Группировать маршруты для логической структуры приложения.
  5. Поддерживать асинхронную загрузку модулей для оптимизации производительности.
  6. Использовать регулярные выражения и необязательные параметры для гибкой маршрутизации.
  7. Контролировать историю браузера через опции replace и событие popstate.

Эти подходы обеспечивают полный контроль над переходами, делают интерфейс отзывчивым и позволяют строить сложные клиентские приложения на чистом JavaScript с минимальной зависимостью от внешних библиотек.

Оглавление