Объявление переходов

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

Регистрация маршрутов

Маршрут в Navigo объявляется с помощью метода on. Синтаксис следующий:

const router = new Navigo('/');

router.on('/home', () => {
  console.log('Главная страница');
});

router.on('/about', () => {
  console.log('Страница о проекте');
});

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

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

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

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

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

Обработка необязательных сегментов и регулярные выражения

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

router.on('/archive/:year/:month?', (params) => {
  console.log('Год:', params.year, 'Месяц:', params.month);
});
  • Символ ? делает сегмент необязательным. Если URL не содержит этот сегмент, параметр будет undefined.
  • Регулярные выражения позволяют задавать более строгие правила для параметров:
router.on('/product/:id(\\d+)', (params) => {
  console.log('ID продукта (только цифры):', params.id);
});

Переход между маршрутами

После объявления маршрутов переходы можно инициировать с помощью метода navigate:

router.navigate('/home');
  • Этот метод обновляет URL в адресной строке без перезагрузки страницы и запускает соответствующий обработчик.
  • Можно передавать объект с параметрами для динамических маршрутов:
router.navigate('/user/42');
  • Также поддерживается передача опций состояния через второй аргумент:
router.navigate('/about', { state: { fromMenu: true } });

Объявление глобальных обработчиков

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

router.notFound(() => {
  console.log('Страница не найдена');
});
  • Можно объявить обработчик по умолчанию для всех маршрутов с помощью символа *:
router.on('*', () => {
  console.log('Любой маршрут');
});

Поддержка нескольких обработчиков на один маршрут

Navigo позволяет назначать несколько функций на один маршрут. Используется массив функций:

router.on('/dashboard', [
  () => console.log('Загрузка панели управления'),
  () => console.log('Инициализация виджетов'),
]);
  • Все функции выполняются последовательно при совпадении маршрута.
  • Позволяет разделять логику по этапам и поддерживать модульность кода.

Настройка методов HTTP и хуков

Хотя Navigo в первую очередь предназначен для фронтенд-маршрутизации, можно использовать хуки до и после перехода:

router.hooks({
  before: (done, params) => {
    console.log('Перед переходом', params);
    done();
  },
  after: (params) => {
    console.log('После перехода', params);
  }
});
  • before вызывается перед выполнением обработчика маршрута. Необходимо вызвать done() для продолжения.
  • after вызывается после выполнения обработчика маршрута.
  • Хуки работают с любыми маршрутами, включая динамические и глобальные.

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

Можно объявлять маршрут с именем, что упрощает навигацию:

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

router.navigate('profile', { id: 10 });
  • as задает имя маршрута.
  • uses — функция обработчика.
  • Позволяет навигировать по имени маршрута, а не по строке URL, что повышает читаемость и удобство поддержки кода.

Советы по организации переходов

  • Все маршруты лучше группировать по логике приложения (например, /admin, /user, /public).
  • Динамические параметры использовать только там, где это действительно необходимо.
  • Для сложных приложений рекомендуется использовать хуки before и after для централизованной обработки состояния, авторизации и загрузки данных.
  • Маршруты с массивом функций позволяют разделять обработку на слои, например, сначала проверка авторизации, затем рендеринг контента, затем инициализация виджетов.

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

Оглавление