Получение текущего маршрута

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

Метод getCurrentRoute()

Для получения информации о текущем маршруте в Navigo используется метод:

router.getCurrentRoute()

Где router — это экземпляр Navigo. Этот метод возвращает объект маршрута, если текущий URL совпадает с каким-либо зарегистрированным маршрутом. Если соответствия нет, возвращается null.

Структура возвращаемого объекта:

  • url — строка текущего пути без домена (например, /about).
  • query — объект, содержащий параметры query string (?page=2&sort=asc преобразуется в { page: '2', sort: 'asc' }).
  • params — объект, содержащий параметры маршрута, заданные через двоеточие в пути (/user/:id → { id: '123' }).
  • route — объект с информацией о маршруте, который совпал с текущим URL, включая его имя и функции обработки.
  • isExact — булево значение, показывающее, точно ли совпадает текущий путь с маршрутом (без дополнительных сегментов).

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

const current = router.getCurrentRoute();
if (current) {
    console.log("Текущий URL:", current.url);
    console.log("Параметры маршрута:", current.params);
    console.log("Query параметры:", current.query);
    console.log("Точный матч:", current.isExact);
}

Получение URL и параметров маршрута

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

router.on('/user/:id/profile', (params) => {
    console.log('Пользователь:', params.id);
});

Можно получить текущий параметр без повторного навешивания обработчика через getCurrentRoute():

const route = router.getCurrentRoute();
if (route && route.params.id) {
    console.log("ID пользователя:", route.params.id);
}

При этом query-параметры из URL доступны через объект query:

// URL: /user/123/profile?tab=posts
const route = router.getCurrentRoute();
console.log(route.query.tab); // "posts"

Проверка точного соответствия маршрута

Иногда важно узнать, совпадает ли текущий URL точно с зарегистрированным маршрутом. Для этого используется свойство isExact:

const route = router.getCurrentRoute();
if (route.isExact) {
    console.log("Текущий маршрут полностью совпадает с зарегистрированным.");
} else {
    console.log("Маршрут совпадает частично или содержит дополнительные сегменты.");
}

Это особенно полезно при создании меню с подсветкой активного пункта или при логике редиректов.

Пример динамического реагирования на текущий маршрут

Можно использовать getCurrentRoute() для динамического отображения контента:

function updatePage() {
    const route = router.getCurrentRoute();
    const content = document.getElementById('content');

    if (!route) {
        content.innerHTML = "<h2>404: Страница не найдена</h2>";
        return;
    }

    switch(route.url) {
        case '/home':
            content.innerHTML = "<h2>Главная</h2>";
            break;
        case '/about':
            content.innerHTML = "<h2>О нас</h2>";
            break;
        default:
            if (route.url.startsWith('/user/')) {
                content.innerHTML = `<h2>Профиль пользователя: ${route.params.id}</h2>`;
            }
    }
}

router.hooks({
    after: () => updatePage()
});

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

Обработка маршрутов с wildcard и вложенных путей

Для маршрутов с подстраницами или динамическими сегментами getCurrentRoute() также возвращает точный путь, соответствующий зарегистрированному маршруту:

router.on('/products/*', () => {
    const route = router.getCurrentRoute();
    console.log("Вложенный путь:", route.url); // /products/electronics/laptop
});

Свойство params['*'] содержит оставшуюся часть пути после звездочки.

Интеграция с именованными маршрутами

Navigo позволяет присваивать имена маршрутам при их регистрации:

router.on({
    '/home': { as: 'homePage', uses: () => console.log('Главная') },
    '/user/:id': { as: 'userPage', uses: (params) => console.log(params.id) }
});

Текущий маршрут можно проверить по имени:

const route = router.getCurrentRoute();
if (route.route && route.route.name === 'userPage') {
    console.log("Пользовательская страница активна");
}

Это удобно при логике навигации и управления состоянием приложения.

Выводы по использованию getCurrentRoute()

  • Позволяет полностью контролировать текущий маршрут, включая URL, параметры и query-параметры.
  • Объект маршрута предоставляет информацию о точном совпадении (isExact) и зарегистрированном маршруте.
  • Совместим с динамическими параметрами, wildcard-путями и именованными маршрутами.
  • Используется для обновления UI, редиректов и логики активации компонентов в SPA.

Использование getCurrentRoute() делает навигацию прозрачной и предсказуемой, позволяя строить сложные интерфейсы на чистом JavaScript без необходимости дополнительных библиотек.

Оглавление