Запуск роутера

Для начала работы с Navigo необходимо установить библиотеку. В современных проектах на основе npm это делается командой:

npm install navigo

Если проект не использует сборщики, библиотеку можно подключить напрямую через CDN:

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

После подключения создается экземпляр роутера. Навигация в Navigo строится вокруг объекта Navigo, которому передается базовый путь приложения:

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

Параметры конструктора:

• root – корневой путь приложения. По умолчанию '/'.
• useHash – если true, роутинг использует хеши (#) в URL.
• linksSelector – CSS-селектор ссылок для автоматической перехватки кликов.

---

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

Маршруты задаются методом .on(), который принимает два типа аргументов:

1. Строка или шаблон URL – путь маршрута.
2. Объект или функцию – обработчик маршрута.

Пример базового маршрута:

router.on('/home', function () {
  document.body.innerHTML = '<h1>Главная страница</h1>';
});

Поддерживаются динамические сегменты URL, обозначаемые двоеточием:

router.on('/user/:id', function (params) {
  document.body.innerHTML = `<h1>Профиль пользователя: ${params.id}</h1>`;
});

Здесь объект params автоматически содержит значения динамических сегментов.

---

Группировка маршрутов и подмаршруты

Для крупных приложений удобна группировка маршрутов с помощью метода .on() с объектом:

router.on({
  '/about': () => renderPage('О нас'),
  '/contact': () => renderPage('Контакты'),
  '/user/:id': (params) => renderUser(params.id)
});

Метод navigate() позволяет программно переходить на маршрут:

router.navigate('/about');

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

router.on({
  '/dashboard': {
    '/stats': () => renderStats(),
    '/settings': () => renderSettings()
  }
});

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

---

Обработка ошибок и маршрутов по умолчанию

Чтобы задать маршрут, который будет выполняться при несоответствии URL, используется метод .notFound():

router.notFound(() => {
  document.body.innerHTML = '<h1>Страница не найдена</h1>';
});

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

router.resolve();

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

---

Навигация с хешами и без

Navigo поддерживает два режима навигации:

1. Hash-based routing – удобен для статических страниц, не требующих серверной настройки:

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

URL будет выглядеть как:

http://example.com/#/home

2. History API routing – использует современный API браузера для чистых URL:

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

Требует настройки серверной части для обработки всех маршрутов на одну точку входа.

---

События навигации

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

router.hooks({
  before: (done, params) => {
    console.log('Перед переходом:', params);
    done(); // обязательный вызов для продолжения навигации
  },
  after: (params) => {
    console.log('После перехода:', params);
  }
});

Хуки before и after полезны для аутентификации, подгрузки данных или отображения индикаторов загрузки.

---

Асинхронная подгрузка компонентов

Маршруты можно связывать с асинхронными функциями:

router.on('/profile/:id', async (params) => {
  const data = await fetch(`/api/user/${params.id}`).then(res => res.json());
  renderUser(data);
});

Это позволяет реализовать динамическую подгрузку страниц без полной перезагрузки браузера.

---

Программное управление URL

Методы navigate() и updatePageLinks() обеспечивают синхронизацию ссылок с роутером:

router.updatePageLinks(); // автоматически перехватывает новые ссылки на странице

Для возврата к предыдущему маршруту можно использовать встроенный History API браузера:

window.history.back();
window.history.forward();

Navigo корректно обрабатывает такие переходы, вызывая соответствующие обработчики маршрутов.

---

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

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

• Vanilla JS – через прямое управление DOM.
• React / Vue / Svelte – как легковесный роутер для SPA.
• Шаблонизаторы – для вставки HTML-шаблонов после асинхронной загрузки данных.

Пример с динамическим рендерингом шаблона:

router.on('/post/:id', (params) => {
  fetch(`/api/posts/${params.id}`)
    .then(res => res.text())
    .then(html => document.getElementById('app').innerHTML = html);
});

---

Оптимизация больших приложений

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

• Разделять маршруты по модулям и использовать import() для динамической загрузки.
• Использовать хуки before для проверки прав доступа.
• Группировать маршруты по функциональным областям (/admin, /user, /shop).
• Обновлять ссылки через updatePageLinks() после добавления нового контента на страницу.

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

---