Парсинг параметров запроса

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

Получение query-параметров

Для извлечения параметров запроса применяется объект URLSearchParams. Например, при URL:

/products?category=books&page=2

доступ к параметрам можно получить так:

const queryString = window.location.search;
const params = new URLSearchParams(queryString);

const category = params.get('category'); // 'books'
const page = params.get('page'); // '2'

Ключевой момент: Navigo не передаёт query-параметры напрямую в колбэк маршрута, их нужно извлекать через window.location.search или location.href.

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

Для маршрутов Navigo можно комбинировать работу с path-параметрами и query-параметрами. Пример:

const router = new Navigo('/');

router.on('/products/:id', (params) => {
    const query = new URLSearchParams(window.location.search);
    const sort = query.get('sort') || 'default';
    const id = params.id;

    console.log(`Товар ID: ${id}, сортировка: ${sort}`);
});

Здесь params.id — это path-параметр, а sort извлекается из строки запроса. Такой подход обеспечивает полное покрытие маршрутизации с динамическими сегментами URL.

Фильтрация и обработка параметров

URLSearchParams поддерживает все стандартные методы работы с коллекцией параметров:

  • get(name) — получение значения параметра;
  • getAll(name) — получение всех значений для одинакового ключа;
  • has(name) — проверка наличия параметра;
  • set(name, value) — установка или замена значения;
  • append(name, value) — добавление нового значения;
  • delete(name) — удаление параметра.

Пример фильтрации:

const params = new URLSearchParams(window.location.search);
const allowedFilters = ['category', 'price', 'brand'];
const filters = {};

for (const [key, value] of params.entries()) {
    if (allowedFilters.includes(key)) {
        filters[key] = value;
    }
}

console.log(filters);

Этот метод полезен для создания безопасного объекта фильтров без лишних параметров, передаваемых пользователем.

Построение URL с параметрами запроса

Для генерации ссылок с query-параметрами удобнее использовать объект URL:

const url = new URL('/products', window.location.origin);
url.searchParams.set('category', 'books');
url.searchParams.set('page', '2');

console.log(url.toString()); // http://example.com/products?category=books&page=2

Такой способ гарантирует корректное экранирование символов и формирование валидного URL, особенно при динамическом формировании ссылок на основе данных.

Работа с обновлением параметров без перезагрузки страницы

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

const router = new Navigo('/');

function updateQueryParam(key, value) {
    const url = new URL(window.location.href);
    url.searchParams.set(key, value);
    router.navigate(url.pathname + url.search);
}

updateQueryParam('page', '3'); // URL обновится на /products?page=3

Использование router.navigate обеспечивает совместимость с системой маршрутизации Navigo и корректное срабатывание обработчиков маршрутов.

Поддержка множественных значений параметров

Если query-параметр может встречаться несколько раз, URLSearchParams.getAll() возвращает массив всех значений:

// URL: /products?tag=js&tag=css&tag=html
const tags = new URLSearchParams(window.location.search).getAll('tag');
console.log(tags); // ['js', 'css', 'html']

Это удобно для фильтров или тегов, где одно свойство может иметь несколько значений.

Резюме по работе с параметрами запроса

  • Path-параметры (:id) и query-параметры обрабатываются разными способами.
  • URLSearchParams обеспечивает удобный и безопасный доступ к query-параметрам.
  • Для динамического изменения query-параметров следует использовать router.navigate, чтобы маршрутизация оставалась консистентной.
  • Фильтрация и валидация параметров позволяет исключить непредусмотренные или потенциально опасные значения.

Эти подходы формируют надежную и гибкую систему парсинга и управления параметрами запроса в приложениях на базе Navigo.

Оглавление