Синтаксис определения маршрутов

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

Создание экземпляра роутера

Для начала необходимо создать экземпляр класса Navigo:

import Navigo from 'navigo';

const router = new Navigo('/', { hash: true });
  • Первый аргумент ('/') указывает базовый путь приложения.
  • Опция { hash: true } включает маршрутизацию с использованием хэша (#), что упрощает работу с серверами, не поддерживающими pushState.

Простое определение маршрута

Маршрут определяется методом on:

router.on('/home', () => {
  console.log('Отображается главная страница');
});
  • Первый аргумент — путь маршрута.
  • Второй аргумент — функция-обработчик, вызываемая при совпадении пути.

Поддерживаются разные варианты определения маршрутов:

  1. Строка — простой путь ('/about').
  2. Массив строк — несколько путей, ведущих к одному обработчику:
router.on(['/contact', '/support'], () => {
  console.log('Страница контактов');
});
  1. Объект с методами — для разных HTTP-методов:
router.on({
  '/login': () => console.log('GET /login'),
  'POST /login': () => console.log('POST /login')
});

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

Navigo позволяет использовать параметры в маршрутах. Они указываются через двоеточие ::

router.on('/user/:id', (params) => {
  console.log('ID пользователя:', params.id);
});
  • В объект params попадут значения динамических сегментов URL.
  • Поддерживается несколько параметров:
router.on('/post/:postId/comment/:commentId', (params) => {
  console.log(params.postId, params.commentId);
});

Регулярные выражения в маршрутах

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

router.on('/product/:id(\\d+)', (params) => {
  console.log('ID продукта:', params.id);
});
  • В данном примере id может содержать только цифры.

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

Параметры могут быть необязательными с помощью ?:

router.on('/search/:query?', (params) => {
  if (params.query) {
    console.log('Поиск по:', params.query);
  } else {
    console.log('Пустой поиск');
  }
});

Маршруты с несколькими уровнями

Маршруты можно структурировать иерархически, комбинируя статические и динамические сегменты:

router.on('/category/:categoryId/product/:productId', (params) => {
  console.log(params.categoryId, params.productId);
});

Использование wildcard

Для ловли любых оставшихся сегментов используется *:

router.on('/files/*', (params) => {
  console.log('Путь к файлу:', params['*']);
});
  • Символ * захватывает весь оставшийся путь.
  • Это удобно для обработки вложенных путей или catch-all страниц.

Объединение маршрутов с объектом

Метод on может принимать объект, где ключи — пути, а значения — функции:

router.on({
  '/': () => console.log('Главная'),
  '/about': () => console.log('О нас'),
  '/contact': () => console.log('Контакты')
});
  • Такой способ позволяет компактно определить множество маршрутов одновременно.

Настройка fallback маршрута

Для обработки неизвестных маршрутов используется notFound:

router.notFound(() => {
  console.log('Страница не найдена');
});
  • Этот обработчик вызывается, если ни один маршрут не совпал с текущим URL.

Запуск маршрутизатора

После определения всех маршрутов необходимо вызвать resolve:

router.resolve();
  • Метод проверяет текущий URL и вызывает соответствующий обработчик.
  • Для динамической навигации resolve() можно вызывать повторно при изменении URL через router.navigate(path).

Важные особенности синтаксиса

  • Чувствительность к слешам: /about и /about/ считаются разными маршрутами.
  • Приоритет маршрутов: Navigo выбирает первый совпавший маршрут, поэтому статические пути следует определять перед динамическими.
  • Поддержка query-параметров: Они не влияют на совпадение пути, но доступны через window.location.search.

Примеры комбинаций

router
  .on('/', () => console.log('Главная'))
  .on('/user/:id', (params) => console.log('Пользователь:', params.id))
  .on('/search/:query?', (params) => console.log('Поиск:', params.query || 'пустой'))
  .on('/files/*', (params) => console.log('Файлы:', params['*']))
  .notFound(() => console.log('404'));

Такой подход демонстрирует всю мощь синтаксиса Navigo: статические маршруты, динамические сегменты, опциональные параметры и wildcard, объединённые в единую систему маршрутизации.

Оглавление