Обработчики маршрутов

В библиотеке Navigo обработчики маршрутов представляют собой функции, которые выполняются при совпадении текущего URL с определённым маршрутом. Каждый маршрут определяется строкой пути и опционально объектом параметров. Функция-обработчик получает данные о параметрах маршрута и объект навигации, что позволяет динамически изменять содержимое страницы без её перезагрузки.

Простейший пример регистрации маршрута:

const router = new Navigo('/');

router.on('/about', () => {
    console.log('Маршрут /about активирован');
});

В этом примере при переходе на /about будет вызвана функция-обработчик, которая выводит сообщение в консоль. Это базовая форма, на которой строятся все остальные возможности маршрутизации.

Работа с параметрами маршрута

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

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

Если пользователь перейдёт на /user/42, объект params будет содержать { id: "42" }.

Особенности работы с параметрами:

  • Параметры всегда возвращаются в виде строк.
  • Несколько параметров можно комбинировать: /post/:postId/comment/:commentId.
  • Для необязательных параметров используется знак вопроса ?: /user/:id?.

Группировка маршрутов и использование массивов

Navigo позволяет объединять маршруты в один вызов on, используя объект или массив. Это удобно при повторяющихся обработчиках.

router.on({
    '/home': () => showHome(),
    '/about': () => showAbout(),
    '/contact': () => showContact()
});

Также можно передать массив путей, чтобы один обработчик срабатывал на нескольких маршрутах:

router.on(['/login', '/signin'], () => showLogin());

Навигация внутри обработчиков

Обработчики маршрутов могут вызывать переходы на другие маршруты через методы navigate или resolve.

router.on('/dashboard', () => {
    if (!userIsLoggedIn()) {
        router.navigate('/login');
    } else {
        renderDashboard();
    }
});

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

Передача и использование query-параметров

Navigo позволяет получать query-параметры через объект query. Например:

router.on('/search', ({ query }) => {
    console.log(`Поиск: ${query.q}`);
});

При переходе на /search?q=navigo обработчик получит объект { query: { q: "navigo" } }. Это позволяет строить гибкие обработчики с фильтрацией и динамическим контентом.

Асинхронные обработчики маршрутов

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

router.on('/profile/:id', async ({ params }) => {
    const data = await fetchUserProfile(params.id);
    renderProfile(data);
});

Асинхронные функции позволяют использовать await для запросов API и обеспечивают чистый и структурированный код.

Использование контекста внутри обработчиков

Внутри обработчиков можно обращаться к объекту маршрутизатора this, что даёт доступ к дополнительным методам и настройкам:

  • this.navigate(path) — программный переход.
  • this.lastRouteResolved() — получение информации о последнем маршруте.
  • this.destroy() — удаление текущего маршрутизатора и всех обработчиков.
router.on('/logout', function() {
    performLogout();
    this.navigate('/login');
});

Обработчики с регулярными выражениями

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

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

В этом примере маршрут сработает только если :id состоит из цифр, предотвращая неправильные переходы.

Обработка несуществующих маршрутов

Для перехвата всех неподходящих URL используется метод notFound:

router.notFound(() => {
    render404Page();
});

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

Динамическая регистрация и удаление обработчиков

Маршруты в Navigo можно добавлять или удалять в любое время:

const handler = () => console.log('Временный маршрут');
router.on('/temp', handler);

// позже
router.off('/temp', handler);

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

Передача дополнительных данных в обработчики

Дополнительные данные можно передавать через контекст при навигации:

router.navigate('/dashboard', { state: { from: 'login' } });

router.on('/dashboard', ({ state }) => {
    console.log(`Переход со страницы: ${state.from}`);
});

Такой подход полезен для реализации сложных сценариев переходов и передачи временной информации между маршрутами.

Оглавление