Обработка множественных значений

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

Определение маршрутов с несколькими значениями

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

Пример базового маршрута с параметром:

const router = new Navigo('/');

router.on('/product/:id', ({ data }) => {
    console.log('ID продукта:', data.id);
});

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

router.on('/tags/:list', ({ data }) => {
    const tags = data.list.split(',');
    console.log('Список тегов:', tags);
});

В этом примере URL /tags/javascript,html,css вернёт массив ['javascript', 'html', 'css'].

Использование регулярных выражений для маршрутов

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

router.on('/category/:name(js|css|html)', ({ data }) => {
    console.log('Выбрана категория:', data.name);
});

Здесь параметр :name может принимать только значения js, css или html. Такой подход обеспечивает строгую фильтрацию входящих маршрутов и предотвращает попадание недопустимых URL.

Обработка необязательных параметров

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

router.on('/filter/:type?', ({ data }) => {
    if (data.type) {
        const types = data.type.split('|');
        console.log('Типы фильтрации:', types);
    } else {
        console.log('Фильтры не заданы');
    }
});

URL /filter/js|css вернёт массив ['js', 'css'], а /filter/ обработается корректно без ошибок.

Передача и разбор query-параметров

Помимо параметров пути, Navigo позволяет работать с query-параметрами, которые часто используются для передачи множественных значений через URL:

router.on('/search', ({ query }) => {
    const tags = query.tags ? query.tags.split(',') : [];
    console.log('Поиск по тегам:', tags);
});

Для URL /search?tags=javascript,css,html параметр tags будет преобразован в массив. Этот способ особенно удобен для фильтров, тегов и множественного выбора.

Динамическое построение маршрутов с массивами

Для построения ссылок на маршруты с множественными значениями удобно использовать функцию generate, которая позволяет динамически формировать URL:

const selectedTags = ['js', 'html', 'css'];
const url = router.generate('/tags/:list', { list: selectedTags.join(',') });
console.log(url); // "/tags/js,html,css"

Таким образом, можно синхронизировать состояние приложения с URL и легко восстанавливать массивы параметров при навигации.

Вложенные маршруты и массивы значений

Navigo поддерживает вложенные маршруты, что полезно для построения сложных структур с множественными значениями:

router.on('/user/:id/posts/:postIds', ({ data }) => {
    const posts = data.postIds.split(',');
    console.log(`Пользователь ${data.id} выбрал посты:`, posts);
});

URL /user/42/posts/1,2,3 обработается корректно, извлекая массив [1, 2, 3]. Вложенные маршруты позволяют комбинировать идентификаторы пользователя, категорий или тегов с массивами значений.

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

Для более гибкой логики можно использовать кастомные функции для преобразования параметров. Например, конвертировать строки в числа или другие структуры данных:

router.on('/order/:ids', ({ data }) => {
    const orderIds = data.ids.split(',').map(id => parseInt(id, 10));
    console.log('ID заказов:', orderIds);
});

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

Резюме ключевых приёмов работы с множественными значениями

  • Разделители в URL (',', '|') для передачи массивов.
  • Регулярные выражения для ограничения допустимых значений параметров.
  • Необязательные параметры с ? для гибкой маршрутизации.
  • Query-параметры для передачи множественных значений через строку запроса.
  • Метод generate для динамического создания URL из массивов.
  • Кастомные функции обработки для конвертации значений и интеграции с бизнес-логикой.

Эти техники позволяют строить сложные маршруты с множественными параметрами, поддерживать чистый и предсказуемый URL, а также упрощают работу с динамическими данными в SPA на базе Navigo.

Оглавление