Получение значений параметров

Navigo — это легковесный роутер для SPA (Single Page Applications) на JavaScript, который позволяет легко управлять маршрутизацией без перезагрузки страницы. Одной из ключевых возможностей является работа с параметрами URL, которые могут быть как динамическими сегментами пути, так и query-параметрами.

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

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

Пример:

import Navigo from 'navigo';

const router = new Navigo('/');

router.on('/user/:id', (params) => {
  console.log(params.id); // выводит значение сегмента id из URL
}).resolve();
  • :id — динамический сегмент маршрута.
  • Внутри обработчика params содержит ключ id с соответствующим значением из URL.

Можно использовать несколько динамических сегментов в одном маршруте:

router.on('/post/:postId/comment/:commentId', (params) => {
  console.log(params.postId);     // идентификатор поста
  console.log(params.commentId);  // идентификатор комментария
}).resolve();

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

  • Если сегмент отсутствует в URL, параметр будет undefined.
  • Динамические сегменты поддерживают только один уровень пути; для вложенных параметров необходимо использовать несколько сегментов.

Query-параметры

Navigo также позволяет работать с query-параметрами, которые следуют после ? в URL. Для получения query-параметров используется метод getQueryString() или доступ через location.search.

Пример:

router.on('/search', () => {
  const query = new URLSearchParams(window.location.search);
  const term = query.get('q');
  console.log(term); // значение параметра q
}).resolve();

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

  • URLSearchParams поддерживает многократные значения одного ключа (query.getAll('key')).
  • Параметры автоматически декодируются из URL-кодировки.
  • Для отслеживания изменений query-параметров можно комбинировать с событием popstate или использовать router.resolve() при каждой навигации.

Смешанные маршруты: динамические сегменты + query-параметры

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

router.on('/product/:id', (params) => {
  const query = new URLSearchParams(window.location.search);
  const color = query.get('color');
  console.log(params.id);   // ID продукта
  console.log(color);       // выбранный цвет
}).resolve();

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

  • Динамические сегменты извлекаются Navigo автоматически.
  • Query-параметры извлекаются стандартными средствами JavaScript (URLSearchParams).

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

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

router.on('/user/:id', ({ id = 'defaultId' } = {}) => {
  console.log(id); // если id отсутствует, будет 'defaultId'
}).resolve();

Такой подход особенно полезен при динамических сегментах, которые могут быть опциональными.

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

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

router.on('/dashboard', {
  '/:section': (params) => {
    console.log(params.section); // раздел дашборда
  },
  '/:section/:item': (params) => {
    console.log(params.section); // раздел
    console.log(params.item);    // конкретный элемент
  }
}).resolve();

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

  • Родительский параметр доступен дочернему маршруту.
  • Порядок определения маршрутов влияет на совпадение URL.

Практические рекомендации

  • Использовать динамические сегменты для уникальных идентификаторов ресурсов (id, slug).
  • Использовать query-параметры для фильтров, сортировки и опциональных данных.
  • Всегда проверять наличие параметра перед использованием.
  • Для сложных маршрутов рекомендуется комбинировать вложенные маршруты с query-параметрами для максимальной гибкости.

Работа с параметрами в Navigo обеспечивает чистую и предсказуемую маршрутизацию, позволяя получать как обязательные значения пути, так и дополнительные опциональные данные через query-параметры, что делает SPA гибкой и легко расширяемой.

Оглавление