Работа с query-строками

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

Query-строки в Navigo можно обрабатывать несколькими способами: через объект параметров маршрута, через встроенный метод .getQuery() или вручную парсить URL.

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

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

import Navigo from 'navigo';

const router = new Navigo('/');

router.on('/products', (params, query) => {
    console.log(query);
});
  • В этом примере query не является стандартным вторым аргументом. Для получения query-параметров можно использовать встроенный объект window.location.search или дополнительные библиотеки для парсинга (URLSearchParams).

Пример с URLSearchParams:

router.on('/products', () => {
    const query = new URLSearchParams(window.location.search);
    const category = query.get('category'); // получаем значение параметра category
    const page = query.get('page');         // получаем значение параметра page
    console.log(`Category: ${category}, Page: ${page}`);
});

Ключевой момент: Navigo не парсит query-параметры автоматически, но интеграция с URLSearchParams делает это легко и удобно.

Генерация URL с query-параметрами

Для навигации и программного изменения маршрутов с query-параметрами используется метод navigate():

router.navigate('/products?category=books&page=2');

В этом случае браузер обновляет URL, а обработчик маршрута получает доступ к параметрам через URLSearchParams:

router.on('/products', () => {
    const query = new URLSearchParams(window.location.search);
    console.log(query.get('category')); // 'books'
});

Можно динамически формировать query-строку:

const params = { category: 'electronics', page: 3 };
const queryString = new URLSearchParams(params).toString();
router.navigate(`/products?${queryString}`);

Преимущество такого подхода: параметры остаются структурированными, легко модифицируемыми и корректно кодируются в URL.

Работа с динамическими маршрутами и query

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

router.on('/products/:id', () => {
    const query = new URLSearchParams(window.location.search);
    const id = router.lastRouteResolved().params.id;
    const ref = query.get('ref');
    console.log(`Product ID: ${id}, Referrer: ${ref}`);
});
  • :id — динамический сегмент маршрута.
  • Query-параметр ref извлекается отдельно.
  • Метод lastRouteResolved() предоставляет доступ к последнему обработанному маршруту и его параметрам.

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

Иногда необходимо изменять query-параметры динамически, не меняя основного маршрута:

function updateQuery(params) {
    const url = new URL(window.location);
    Object.keys(params).forEach(key => url.searchParams.set(key, params[key]));
    router.navigate(url.pathname + url.search, { updateBrowserURL: true });
}

updateQuery({ page: 5, category: 'furniture' });
  • updateBrowserURL: true гарантирует, что URL изменится в адресной строке.
  • Сегменты маршрута остаются прежними, изменяются только query-параметры.

Парсинг сложных query-структур

Query-параметры могут содержать массивы или вложенные объекты, например: /products?category=books&tags=fiction,history

Для разбора таких структур удобно использовать split():

const query = new URLSearchParams(window.location.search);
const tags = query.get('tags')?.split(',') || [];
console.log(tags); // ['fiction', 'history']

Если требуется сериализация сложных объектов, лучше использовать JSON:

const filters = { color: 'red', size: 'M' };
const queryString = `filters=${encodeURIComponent(JSON.stringify(filters))}`;
router.navigate(`/products?${queryString}`);

// Извлечение:
const filtersObj = JSON.parse(decodeURIComponent(new URLSearchParams(window.location.search).get('filters')));
console.log(filtersObj.color); // 'red'

Советы по оптимальной работе с query

  1. Структурируйте параметры: избегайте длинных строк без разделителей; используйте массивы и JSON при необходимости.
  2. Кодируйте значения: encodeURIComponent гарантирует корректность URL.
  3. Разделяйте динамический путь и query: это упрощает обработку маршрутов и их тестирование.
  4. Используйте URLSearchParams: современный и удобный инструмент для получения, установки и удаления параметров.
  5. Обновляйте URL через router.navigate(): это сохраняет историю браузера и позволяет корректно работать с кнопками «назад/вперед».

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

Оглавление