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

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

Подключение и инициализация

Для использования Navigo достаточно подключить скрипт через CDN или npm:

<script src="https://unpkg.com/navigo@8.11.1/lib/navigo.min.js"></script>

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

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

Параметры:

'/' — базовый URL приложения.
{ hash: true } — включение маршрутизации через хеши (#), полезно для приложений без поддержки History API на сервере.

Определение маршрутов

Маршруты связываются с функциями-обработчиками:

router.on({
  '/': () => renderHome(),
  '/about': () => renderAbout(),
  '/contact': () => renderContact()
});

Каждый путь вызывает соответствующую функцию. Можно использовать строки с параметрами:

router.on('/user/:id', ({ data }) => {
  renderUserProfile(data.id);
});

Здесь :id — динамический сегмент, значение передается в data.id.

Обработка параметров и query string

Navigo автоматически извлекает параметры из URL и передаёт их в обработчик. Например:

router.on('/search/:query', ({ data, query }) => {
  console.log(data.query);  // значение из пути
  console.log(query.page);  // значение из query string, например ?page=2
});

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

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

router.navigate('/about');

При этом вызывается соответствующий обработчик маршрута.

Редиректы и fallback

Можно настроить редиректы или маршруты по умолчанию:

router.on('/old-page', () => router.navigate('/new-page'));
router.notFound(() => renderNotFound());

Метод notFound срабатывает для несуществующих маршрутов.

Объединение с DOM

Для обновления контента страницы обычно используется функция рендеринга:

function renderHome() {
  document.getElementById('app').innerHTML = `
    <h1>Главная страница</h1>
    <p>Добро пожаловать!</p>
  `;
}

function renderAbout() {
  document.getElementById('app').innerHTML = `
    <h1>О нас</h1>
    <p>Информация о компании.</p>
  `;
}

Маршрутизатор связывает URL с функцией, которая обновляет DOM. Это позволяет создавать SPA без сторонних фреймворков.

События и hooks

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

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

Пример:

router.on('/admin', {
  before: (done, params) => {
    if (!isAdmin()) {
      router.navigate('/');
    } else {
      done();
    }
  },
  uses: () => renderAdmin()
});

Поддержка History API

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

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

router.on('/products', () => renderProducts());
router.resolve();

Метод resolve() проверяет текущий URL и вызывает соответствующий обработчик при инициализации.

Ленивая загрузка маршрутов

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

router.on('/dashboard', async () => {
  const module = await import('./dashboard.js');
  module.renderDashboard();
});

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

Группировка и вложенные маршруты

Navigo поддерживает вложенные маршруты и группировку через объекты:

router.on({
  '/shop': () => renderShop(),
  '/shop/products': () => renderProducts(),
  '/shop/cart': () => renderCart()
});

Каждый маршрут может иметь свои параметры и отдельные обработчики.

Использование с anchor-тегами

Для корректной работы навигации через ссылки в SPA нужно предотвращать стандартное поведение браузера:

<a href="/about" data-navigo>О нас</a>

И активировать обработку ссылок:

router.updatePageLinks();

Метод updatePageLinks автоматически перехватывает клики по ссылкам с атрибутом data-navigo и вызывает маршрутизатор без перезагрузки страницы.

Совместимость с браузерами

Navigo поддерживает все современные браузеры и IE11 с полифилами для History API. Использование опции hash: true позволяет работать на старых серверах без настройки rewrite-правил.