Паттерны интеграции

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

Создание и настройка роутера

Инициализация роутера происходит через создание нового экземпляра класса Navigo. Конструктор принимает базовый URL приложения и опции поведения:

import Navigo from 'navigo';

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

Ключевые параметры:

  • root — базовый путь приложения. Обычно '/'.
  • hash — определяет, использовать ли hash-маршрутизацию (true) или History API (false).
  • linksSelector — CSS-селектор для ссылок, которые роутер должен перехватывать.
  • useHash — альтернативный способ включения hash-маршрутизации.

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

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

router.on('/home', () => {
  console.log('Отображается главная страница');
});

router.on('/about', () => {
  console.log('Отображается страница "О нас"');
});

Можно использовать параметризованные маршруты:

router.on('/user/:id', ({ data }) => {
  console.log(`Пользователь с ID: ${data.id}`);
});

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

Работа с маршрутными параметрами

Маршруты могут содержать:

  • Позиционные параметры — :param Используются для извлечения данных из URL.

  • Опциональные параметры — :param? Позволяют маршруту работать как с присутствием параметра, так и без него.

  • Спред-параметры — *param Позволяют захватывать произвольные сегменты URL, удобны для вложенных маршрутов.

Пример с опциональными и спред-параметрами:

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

Навигация программно

Navigo предоставляет метод navigate для перехода по маршрутам без перезагрузки страницы:

router.navigate('/home');
router.navigate('/user/42');

Переходы можно сопровождать состоянием и опциями:

router.navigate('/about', { state: { from: 'home' }, updateBrowserURL: true });

Обработка несуществующих маршрутов

Метод notFound позволяет задать обработчик для случаев, когда URL не совпадает ни с одним маршрутом:

router.notFound(() => {
  console.log('Страница не найдена');
});

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

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

  • before — вызывается перед обработчиком маршрута. Может отменить переход.
  • after — вызывается после перехода, полезно для аналитики или обновления состояния UI.

Пример хуков:

router.on('/dashboard', () => {
  console.log('Отображается панель');
}).before(() => {
  console.log('Проверка авторизации');
  return true; // true — разрешить переход
}).after(() => {
  console.log('Переход завершён');
});

Интеграция с динамическим контентом

Navigo легко интегрируется с динамическими фреймворками и компонентами. Часто используют метод resolve для ручного обновления маршрутов после загрузки новых компонентов:

router.resolve();

Это важно, если DOM изменился динамически и роутер должен учесть новые ссылки.

Паттерны построения SPA

  1. Маршруты + шаблоны Каждому маршруту соответствует HTML-шаблон или компонент, который рендерится в контейнер:
const rootElement = document.getElementById('app');

router.on('/home', () => {
  rootElement.innerHTML = '<h1>Главная</h1>';
});

  1. Маршруты + состояние Хранение состояния приложения через объекты state и управление через маршруты. Позволяет создавать истории переходов и возвращаться к предыдущим состояниям.

  2. Lazy-loading компонентов Загрузка модулей и компонентов по мере необходимости. Используется совместно с import() и маршрутизатором:

router.on('/profile', async () => {
  const module = await import('./profile.js');
  module.renderProfile();
});
  1. Middleware-паттерн Создание цепочки промежуточных обработчиков для проверки авторизации, логирования и других действий перед выполнением основного обработчика маршрута.
function authGuard(done) {
  if (!user.isLoggedIn) {
    router.navigate('/login');
    return false;
  }
  return true;
}

router.on('/dashboard', () => {
  console.log('Панель управления');
}).before(authGuard);

Работа с History API и hash

  • History API Позволяет управлять URL без перезагрузки страницы, используя pushState и replaceState. Опция hash: false активирует этот режим.

  • Hash-маршрутизация Используется для поддержки старых браузеров или статических сайтов. Опция hash: true включает маршруты вида /#/home.

Резюме по паттернам интеграции

  • Параметры и динамические сегменты URL позволяют создавать гибкие маршруты.
  • Хуки before и after обеспечивают управление доступом и побочные эффекты.
  • Методы navigate и resolve гарантируют синхронизацию URL с состоянием приложения.
  • Lazy-loading и middleware помогают масштабировать SPA без усложнения кода.

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

Оглавление