Доступ к параметрам

Navigo — это легковесная библиотека для маршрутизации в JavaScript, которая позволяет удобно управлять URL и параметрами маршрутов. Ключевое преимущество работы с Navigo заключается в гибкости обработки динамических сегментов пути и query-параметров.

Динамические сегменты маршрута

Dинамический сегмент обозначается двоеточием (:) в определении маршрута. Например:

const router = new Navigo('/');

router.on('/user/:id', ({ data }) => {
    console.log(data.id);
});

В этом примере :id — динамический сегмент, который при совпадении маршрута автоматически попадает в объект data. Если пользователь переходит по пути /user/42, в консоль будет выведено 42.

Особенности работы с динамическими сегментами:

  • Любой сегмент пути, начинающийся с :, автоматически считается параметром.
  • Можно использовать несколько параметров в одном пути, например: /user/:id/post/:postId.
  • Параметры всегда передаются в колбэк через объект data.
router.on('/user/:id/post/:postId', ({ data }) => {
    console.log(`User ID: ${data.id}, Post ID: ${data.postId}`);
});

Необязательные параметры

Navigo поддерживает необязательные параметры, которые заключаются в скобки. Например:

router.on('/archive(/:year)(/:month)', ({ data }) => {
    console.log(data.year, data.month);
});
  • /archive → data.year = undefined, data.month = undefined
  • /archive/2026 → data.year = "2026", data.month = undefined
  • /archive/2026/03 → data.year = "2026", data.month = "03"

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

Query-параметры

Query-параметры (?key=value) в Navigo можно получить через объект query в колбэке:

router.on('/search', ({ query }) => {
    console.log(query.q, query.page);
});

Переход по пути /search?q=navigo&page=2 выведет:

navigo 2

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

  • Все параметры автоматически декодируются.
  • Если параметр отсутствует, его значение будет undefined.
  • Можно комбинировать query-параметры с динамическими сегментами.
router.on('/user/:id', ({ data, query }) => {
    console.log(data.id, query.tab);
});

Путь /user/42?tab=posts → data.id = "42", query.tab = "posts"

Доступ к параметрам через метод getParams()

Navigo предоставляет метод getParams() для получения параметров текущего маршрута без необходимости их передачи в колбэк. Пример:

const params = router.getParams('/user/42');
console.log(params.id); // 42
  • getParams(route) возвращает объект, где ключи — имена параметров маршрута, а значения — соответствующие сегменты URL.
  • Полезно для случаев, когда нужно получить параметры вне контекста обработчика маршрута.

Применение параметров в редиректах и генерации URL

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

const path = router.generate('/user/:id/post/:postId', { id: 42, postId: 7 });
console.log(path); // /user/42/post/7
  • Метод generate() автоматически подставляет значения параметров.
  • Позволяет создавать ссылки, кнопки и редиректы без ручного конструирования строк.

Масштабирование маршрутов с параметрами

Для сложных приложений рекомендуется:

  • Структурировать маршруты с именованными параметрами для удобства доступа.
  • Использовать необязательные параметры и query-параметры для минимизации количества отдельных маршрутов.
  • Сохранять параметры в состоянии приложения при необходимости кэширования или передачи между компонентами.

Важные нюансы

  1. Декодирование параметров: Navigo автоматически декодирует URL-энкодированные символы. Например, /user/%20 → " ".
  2. Пустые сегменты: Если динамический сегмент пуст, значение будет пустой строкой "".
  3. Тип данных: Параметры всегда возвращаются как строки, даже если они выглядят как числа. Для числовой логики необходимо явное преобразование: parseInt(data.id, 10).

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

Оглавление