Проверка активного роута

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

Navigo предоставляет метод router.match() и свойства маршрутов, которые можно использовать для определения текущего URL и соответствия его зарегистрированным роутам.

Метод router.match()

Метод match анализирует текущий URL и возвращает объект, содержащий информацию о совпадении с зарегистрированными маршрутами.

Пример использования:

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });

router.on({
  '/home': () => console.log('Home route'),
  '/about': () => console.log('About route')
}).resolve();

// Проверка активного роута
const matched = router.match('/about');
if (matched) {
  console.log('Маршрут активен:', matched.route.path);
}

Ключевые моменты:

  • router.match(path) возвращает объект с полями route и params.
  • Если маршрут не найден, метод возвращает null.
  • Метод полезен для проверки текущего состояния, не вызывая обработчик маршрута.

Свойство router.lastRouteResolved()

Navigo хранит информацию о последнем разрешенном маршруте. С помощью метода lastRouteResolved() можно получить объект с данными о последнем активном пути.

Пример:

router.on('/profile/:id', (params) => {
  console.log('Профиль пользователя', params.id);
}).resolve('/profile/42');

const lastRoute = router.lastRouteResolved();
console.log('Последний активный маршрут:', lastRoute.route.path);
console.log('Параметры:', lastRoute.params);

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

  • Позволяет получать параметры маршрута (params) без повторного вызова match().
  • Удобно использовать для состояния интерфейса или проверки текущего раздела.

Проверка маршрута по текущему URL

Иногда необходимо определить активный маршрут на основе текущего адреса в браузере. Navigo поддерживает доступ к текущему URL через router.lastRouteResolved().url или глобально через window.location.pathname.

Пример динамической проверки:

function isActiveRoute(path) {
  const lastRoute = router.lastRouteResolved();
  return lastRoute && lastRoute.route.path === path;
}

if (isActiveRoute('/home')) {
  console.log('Маршрут /home активен');
}

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

  • Сравнение происходит с зарегистрированным шаблоном пути, а не с полным URL с параметрами.
  • Позволяет создавать универсальные функции подсветки меню и навигации.

Сравнение активного маршрута с шаблонами

Navigo позволяет использовать параметры в маршрутах (:id, :slug). При проверке активного роута важно учитывать, что совпадение возвращает объект с реальными значениями параметров.

Пример:

router.on('/product/:id', (params) => {
  console.log('Продукт', params.id);
}).resolve('/product/123');

const matched = router.match('/product/123');
if (matched) {
  console.log('Активный маршрут:', matched.route.path); // /product/:id
  console.log('ID продукта:', matched.params.id); // 123
}

Таким образом, проверка активного маршрута с параметрами требует использования matched.params, если необходимо получить конкретные данные, а не только шаблон пути.

Реактивная подсветка меню

Частый кейс — выделение текущего пункта меню. Используется метод router.lastRouteResolved() или router.match() для определения соответствия:

const menuLinks = document.querySelectorAll('.menu a');

function highlightActiveLink() {
  const lastRoute = router.lastRouteResolved();
  menuLinks.forEach(link => {
    const path = link.getAttribute('href');
    if (lastRoute && lastRoute.route.path === path) {
      link.classList.add('active');
    } else {
      link.classList.remove('active');
    }
  });
}

router.hooks({
  after: highlightActiveLink
});

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

  • Использование after hook гарантирует, что подсветка происходит после изменения маршрута.
  • Поддерживает маршруты с параметрами, если использовать router.match() вместо прямого сравнения.

Вывод параметров текущего маршрута

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

router.on('/user/:userId/post/:postId', (params) => {
  console.log('Пользователь:', params.userId);
  console.log('Пост:', params.postId);
}).resolve('/user/7/post/42');

const matched = router.match('/user/7/post/42');
if (matched) {
  console.log('Параметры активного маршрута:', matched.params);
}

Ключевые моменты:

  • params всегда содержит все динамические сегменты маршрута.
  • Позволяет строить универсальные функции проверки и извлечения данных из URL.

Итоговые рекомендации по проверке активного роута

  • Использовать router.match(path) для точной проверки соответствия конкретного маршрута.
  • Применять router.lastRouteResolved() для получения текущего состояния приложения.
  • Для меню и UI использовать хуки (before, after) вместе с проверкой маршрута.
  • Для маршрутов с параметрами всегда работать через params, чтобы не сравнивать динамические части URL напрямую.

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

Оглавление