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

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

Синтаксис динамических параметров

Динамический сегмент маршрута обозначается через двоеточие : перед именем параметра:

const router = new Navigo('/');

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

В этом примере путь /users/42 передаст в объект params ключ id со значением "42".

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

  • Имя параметра должно быть уникальным в рамках одного маршрута.
  • Любые символы после / до конца сегмента считаются частью параметра.
  • Параметры всегда возвращаются в виде строки.

Несколько динамических параметров

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

router.on('/users/:userId/posts/:postId', (params) => {
    console.log(`User: ${params.userId}, Post: ${params.postId}`);
});

При переходе на /users/7/posts/15 объект params будет:

{
  userId: "7",
  postId: "15"
}

Параметры с опциональной частью

Navigo поддерживает опциональные параметры с использованием знака вопроса ? внутри маршрута:

router.on('/search/:query?', (params) => {
    if (params.query) {
        console.log(`Поиск: ${params.query}`);
    } else {
        console.log('Пустой запрос');
    }
});
  • Если URL /search/javascript, параметр query будет "javascript".
  • Если URL /search, объект params останется пустым.

Ограничения формата параметров

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

router.on('/product/:id', (params) => {
    if (/^\d+$/.test(params.id)) {
        console.log(`ID продукта: ${params.id}`);
    } else {
        console.error('Неверный формат ID');
    }
});

Для более сложных сценариев можно создавать кастомные правила:

router.on('/category/:name', { name: '[a-z]+' }, (params) => {
    console.log(`Категория: ${params.name}`);
});

Здесь маршрутизатор будет соответствовать только строкам, состоящим из маленьких латинских букв.

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

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

router.on('/profile/:username/settings', (params) => {
    const user = params.username;
    console.log(`Настройки пользователя: ${user}`);
});

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

Динамические параметры и ссылки

Для генерации ссылок с динамическими параметрами используется метод navigate:

router.navigate('/users/42');

Можно также строить URL динамически:

const userId = 99;
router.navigate(`/users/${userId}`);

Это гарантирует, что URL соответствует маршрутам с динамическими сегментами.

Параметры в комбинации с wildcard

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

router.on('/files/:folder/*', (params) => {
    console.log(`Папка: ${params.folder}, Путь: ${params['*']}`);
});

При переходе на /files/docs/manual.pdf объект params будет:

{
  folder: "docs",
  "*": "manual.pdf"
}

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

Практические советы

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

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

Оглавление