Именованные параметры

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

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

Именованный параметр определяется с помощью двоеточия : перед названием переменной внутри маршрута. Например:

const router = new Navigo('/');

router.on('/user/:id', function (params) {
  console.log(params.id);
});

В этом примере :id — это именованный параметр. Если пользователь перейдёт по адресу /user/42, объект params будет содержать { id: "42" }.

Ключевые моменты:

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

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

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

router.on('/post/:postId/comment/:commentId', function (params) {
  console.log(params.postId, params.commentId);
});

Для URL /post/7/comment/15 объект params будет равен:

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

Опциональные параметры

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

router.on('/search/:query?', function (params) {
  console.log(params.query);
});
  • При переходе на /search/javascript params.query будет "javascript".
  • При переходе на /search/ params.query будет undefined.

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

Регулярные выражения для параметров

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

router.on('/product/:id(\\d+)', function (params) {
  console.log(params.id);
});
  • Здесь :id(\\d+) разрешает только числовые значения.
  • URL /product/123 будет корректно обработан, а /product/abc — нет.

Регулярные выражения позволяют создавать более строгие маршруты, что особенно важно для REST-подобных интерфейсов.

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

Navigo позволяет использовать метод navigate с параметрами для генерации URL. Можно передать объект с именованными параметрами:

router.navigate('/user/:id', { id: 42 });

После этого браузер перейдёт на URL /user/42.

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

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

router.on('/user/:userId', function (params) {
  console.log('User ID:', params.userId);
})
.on('/user/:userId/profile', function (params) {
  console.log('Profile of user:', params.userId);
});
  • Первый маршрут сработает на /user/5.
  • Второй маршрут сработает на /user/5/profile.
  • Параметры userId автоматически передаются в обработчики.

Использование параметров с хэш-маршрутизацией

Если приложение использует хэш-маршрутизацию (#), именованные параметры работают точно так же:

const router = new Navigo('/', { hash: true });

router.on('/page/:name', function (params) {
  console.log(params.name);
});

router.navigate('/page/home');
  • URL будет выглядеть как /#/page/home.
  • params.name равен "home".

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

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

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

Оглавление