Установка и подключение

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

Установка через npm

Наиболее распространённый способ подключения — через пакетный менеджер npm. Для этого используется стандартная команда установки:

npm install navigo

После успешной установки пакет появляется в папке node_modules вашего проекта и готов к импорту в скриптах.

Импорт в JavaScript выглядит следующим образом:

import Navigo from 'navigo';

Для использования ES-модулей необходимо убедиться, что проект настроен на работу с модульной системой. В Node.js это можно сделать, добавив в package.json:

"type": "module"

Для проектов с использованием сборщиков, таких как Webpack, Parcel или Vite, достаточно стандартного импорта через import.

Подключение через CDN

Если проект не использует сборщики и npm, можно подключить Navigo напрямую через CDN. Для этого в HTML-документ добавляется тег <script>:

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

После подключения библиотека доступна глобально через объект Navigo:

const router = new Navigo('/');

Версия в ссылке CDN может быть заменена на актуальную, проверяемую на официальном сайте или в репозитории GitHub. Такой способ удобен для небольших проектов и тестирования.

Инициализация роутера

После подключения библиотеки необходимо создать экземпляр роутера и указать базовый путь приложения:

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

  • Параметр '/' указывает базовый путь, относительно которого будут строиться маршруты.

  • Опция hash управляет типом маршрутизации:

    • hash: false — используется “чистый” URL (/home).
    • hash: true — используется хэш-маршрутизация (#/home), которая не требует настройки сервера.

Подключение в браузерном окружении без сборщика

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

<script src="https://unpkg.com/navigo@8.11.1/lib/navigo.min.js"></script>
<script>
  const router = new Navigo('/', { hash: true });

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

В этом примере сразу создаётся роутер, добавляется маршрут и выполняется его разрешение. Такой подход удобен для небольших прототипов и демонстраций.

Выбор способа подключения

  • npm — предпочтительный способ для крупных приложений, использующих сборку и модули.
  • CDN — быстрый способ для прототипов, демонстраций и небольших проектов.
  • При использовании сборщиков рекомендуется всегда контролировать версию библиотеки через package.json для предотвращения несовместимостей.

Проверка подключения

После установки и подключения важно убедиться, что библиотека работает корректно. Минимальный тест:

console.log(Navigo); // Должен вывести функцию-конструктор роутера

Если объект Navigo доступен и без ошибок создаётся экземпляр роутера, подключение выполнено успешно.

Советы по организации подключения

  1. В проектах с несколькими скриптами рекомендуется инициализацию роутера выполнять в отдельном модуле router.js.
  2. Для поддержки старых браузеров при подключении через CDN можно использовать транспиляцию Babel.
  3. При подключении через npm лучше фиксировать версию в package.json для стабильности проекта:
"dependencies": {
  "navigo": "^8.11.1"
}
  1. Если приложение использует хэш-маршрутизацию, убедиться, что сервер не препятствует обновлению URL при использовании чистых маршрутов.

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

Оглавление