Базовая настройка проекта

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

Через CDN:

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

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

Через npm:

npm install navigo

В коде на ES6 модулях подключение выглядит так:

import Navigo from 'navigo';

Использование npm предпочтительно для проектов с модульной структурой и сборкой через Webpack, Vite или Parcel, так как позволяет управлять версиями и подключать маршрутизатор как полноценный модуль.

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

Экземпляр Navigo создается с указанием базового пути и опций:

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

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

  • root — базовый путь приложения. Обычно это '/'.

  • options — объект конфигурации:

    • hash (boolean) — использовать ли хеш-маршрутизацию (# в URL). По умолчанию false.
    • linksSelector (string) — селектор ссылок, которые автоматически будут отслеживаться маршрутизатором.
    • useHash (boolean, устаревший) — аналог hash.
    • trailingSlash (boolean) — учитывать или игнорировать конечный слэш в URL.

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

Маршруты в Navigo определяются методом .on(). Он принимает объект или цепочку вызовов с путями и обработчиками.

Пример объекта маршрутов:

router.on({
  '/': () => {
    console.log('Главная страница');
  },
  '/about': () => {
    console.log('О проекте');
  },
  '/contact': () => {
    console.log('Контакты');
  }
});

Пример с цепочкой вызовов:

router
  .on('/', () => console.log('Главная'))
  .on('/about', () => console.log('О проекте'))
  .on('/contact', () => console.log('Контакты'));

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

Navigo поддерживает параметры URL, позволяя определять маршруты вида /user/:id. Значения параметров автоматически передаются в обработчик.

router.on('/user/:id', (params) => {
  console.log('ID пользователя:', params.id);
});

Параметры можно комбинировать с несколькими сегментами:

router.on('/post/:postId/comment/:commentId', (params) => {
  console.log(params.postId, params.commentId);
});

Обработка необязательных и опциональных параметров

Опциональные параметры задаются через ? в пути. Например:

router.on('/search/:query?', (params) => {
  if (params.query) {
    console.log('Поиск по запросу:', params.query);
  } else {
    console.log('Все результаты поиска');
  }
});

Если параметр не указан, объект params содержит пустое значение.

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

Метод .navigate() позволяет переходить на нужный маршрут из кода, без использования ссылок <a>.

router.navigate('/about');

Также можно передавать параметры:

router.navigate('/user/123');

Если включена хеш-маршрутизация, URL автоматически преобразуется в #/about или #/user/123.

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

Navigo позволяет отслеживать все изменения маршрутов с помощью метода .hooks() или глобального слушателя:

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

Метод done() используется для асинхронных операций, например, загрузки данных перед рендером страницы.

Работа с ссылками на странице

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

const router = new Navigo('/', { linksSelector: 'a.nav-link' });

Все клики по ссылкам с классом nav-link будут перехвачены Navigo, и страница не будет перезагружаться. Важно использовать обычные <a href="/path"> для совместимости.

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

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

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

Это удобно для создания страницы 404 без необходимости вручную проверять URL.

Активация маршрутизатора

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

router.resolve();

Если используется асинхронная загрузка или динамический рендеринг, .resolve() можно вызывать после завершения всех операций и подготовки DOM.

Пример полной базовой настройки

import Navigo from 'navigo';

const router = new Navigo('/', { hash: false, linksSelector: 'a.nav-link' });

router
  .on('/', () => renderHome())
  .on('/about', () => renderAbout())
  .on('/contact', () => renderContact())
  .on('/user/:id', (params) => renderUser(params.id))
  .notFound(() => renderNotFound())
  .hooks({
    before: (done, params) => {
      console.log('Перед переходом', params);
      done();
    },
    after: (params) => console.log('После перехода', params)
  });

router.resolve();

function renderHome() { /* логика рендера главной */ }
function renderAbout() { /* логика рендера о проекте */ }
function renderContact() { /* логика рендера контактов */ }
function renderUser(id) { /* логика рендера пользователя */ }
function renderNotFound() { /* логика рендера 404 */ }

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

Оглавление