Префиксы путей

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

Установка префикса

Для задания префикса используется параметр root при создании экземпляра Navigo:

import Navigo from 'navigo';

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

Здесь /app — это префикс, который будет автоматически добавлен ко всем маршрутам. Если маршрут задан как /dashboard, фактический URL будет /app/dashboard.

  • root — базовый путь приложения.
  • hash — определяет использование хеш-маршрутизации (true) или обычной истории браузера (false).

Использование префикса с маршрутами

После задания префикса маршруты объявляются как обычно:

router.on('/dashboard', () => {
  console.log('Dashboard открыт');
});

router.on('/profile/:id', (params) => {
  console.log('Профиль пользователя', params.id);
});

При обращении к URL /app/dashboard сработает соответствующий маршрут, а /app/profile/42 передаст в обработчик объект { id: '42' }.

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

router.on('/special', () => {
  console.log('Маршрут без префикса');
});

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

Применение префикса не мешает работе динамических сегментов:

router.on('/product/:category/:id', (params) => {
  console.log(`Категория: ${params.category}, ID: ${params.id}`);
});

Для URL /app/product/electronics/123 объект params будет { category: 'electronics', id: '123' }.

Префикс и генерация ссылок

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

const url = router.generate('/profile/:id', { id: 5 });
console.log(url); // /app/profile/5

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

Изменение префикса после инициализации

Хотя чаще всего префикс задается один раз при создании роутера, можно изменить его динамически через метод updatePageLinks или при необходимости перенастроить корневой путь:

router.root('/newApp');
router.updatePageLinks();

После этого все ссылки с атрибутом data-navigo будут использовать новый префикс /newApp.

Особенности работы с hash-маршрутизацией

При использовании хеш-маршрутизации префикс применяется к части URL до символа # и не изменяет хеш:

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

URL /app/#/dashboard корректно сопоставляется с маршрутом /dashboard.

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

  • Использовать префикс имеет смысл, если приложение размещается не в корне сайта.
  • Префикс облегчает работу с множеством маршрутов и предотвращает конфликты при интеграции с другими частями сайта.
  • Всегда комбинировать префикс с динамическими сегментами через :param для гибкого построения маршрутов.
  • Генерация ссылок через router.generate обеспечивает согласованность URL даже при изменении базового пути.

Пример комплексного использования

import Navigo from 'navigo';

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

router
  .on('/', () => console.log('Главная страница'))
  .on('/dashboard', () => console.log('Dashboard'))
  .on('/profile/:id', (params) => console.log('Профиль пользователя', params.id))
  .on('/product/:category/:id', (params) => console.log(`Категория: ${params.category}, ID: ${params.id}`));

router.resolve();

В этом примере все маршруты учитывают префикс /app, динамические сегменты корректно передают параметры, а вызов router.resolve() запускает обработку текущего URL с учетом префикса.

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

Оглавление