Настройка стратегии роутинга

Для начала работы с библиотекой Navigo необходимо подключить её к проекту. Наиболее распространённые способы: через npm или CDN.

Через npm:

npm install navigo

Затем импорт в проект:

import Navigo from 'navigo';

Через CDN:

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

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

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

Здесь первый параметр '/' задаёт базовый путь приложения, а опция hash: true включает hash-роутинг.

Стратегии роутинга

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

1. History API

History API позволяет использовать обычные URL без #.

Пример настройки:

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

Особенности:

  • Поддержка методов pushState и replaceState.
  • URL остаётся чистым, например /about.
  • Требует настройки сервера: все запросы должны перенаправляться на основной HTML-файл.

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

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

2. Hash-роутинг

Hash-роутинг использует # в URL. Пример: /index.html#/about.

Настройка:

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

Особенности:

  • Не требует серверной конфигурации.
  • URL с хешем не обновляет страницу при навигации.
  • Прост в использовании для SPA без серверной поддержки.

Пример маршрута:

router
  .on('/contact', () => {
    console.log('Контакты');
  })
  .resolve();

Настройка базового пути (root)

Bазовый путь определяет префикс, который будет учитываться при обработке всех маршрутов.

Пример:

const router = new Navigo('/app', { hash: false });
  • URL /app/home будет сопоставлен с маршрутом /home.
  • Позволяет запускать SPA из подкаталога сервера, а не из корня.

Параметры и динамические сегменты

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

Пример:

router.on('/user/:id', ({ data }) => {
  console.log('ID пользователя:', data.id);
});
  • :id – это параметр маршрута.
  • Значение извлекается из объекта data.

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

router.on('/product/:category/:id', ({ data }) => {
  console.log(data.category, data.id);
});

Опции роутера

Основные опции, которые влияют на стратегию роутинга:

  • hash – включение hash-роутинга (true) или History API (false).
  • root – базовый путь приложения.
  • linksSelector – CSS-селектор ссылок, на которые подписывается роутер для автоматической навигации.
  • strategy – позволяет настраивать обработку URL (например, ALL для полного сопоставления маршрутов).

Пример использования опций:

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

Настройка поведения при переходе на маршрут

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

router
  .on('/dashboard', () => {
    console.log('Дашборд загружен');
  })
  .notFound(() => {
    console.log('Маршрут не найден');
  })
  .resolve();
  • on – назначает обработчик маршрута.
  • notFound – задаёт действие, если маршрут не найден.
  • resolve – инициирует проверку текущего URL и вызывает соответствующий маршрут.

Перенаправления

Для удобства можно настраивать редиректы между маршрутами:

router.on('/home', () => {
  console.log('Главная');
});
router.on('/start', () => {
  router.navigate('/home');
});
  • navigate позволяет программно изменять URL и запускать сопоставление маршрутов.
  • Полезно для реализации логики перенаправления после аутентификации или действий пользователя.

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

Для оптимизации SPA можно загружать код страниц по мере необходимости:

router.on('/settings', async () => {
  const module = await import('./settings.js');
  module.render();
});
  • Динамический импорт позволяет уменьшить первоначальный размер бандла.
  • Работает с любой стратегией роутинга.

Итоговая настройка

Для сложного SPA рекомендуется комбинировать:

  • History API для чистых URL.
  • Базовый путь (root) для подкаталогов.
  • Динамические параметры для страниц с переменными.
  • Редиректы и ленивая загрузка для оптимизации.

Пример комплексной настройки:

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

router
  .on('/home', () => console.log('Главная'))
  .on('/user/:id', ({ data }) => console.log('Пользователь', data.id))
  .on('/settings', async () => {
    const module = await import('./settings.js');
    module.render();
  })
  .notFound(() => console.log('Страница не найдена'))
  .resolve();

Такое сочетание позволяет полностью контролировать стратегию роутинга и поведение SPA, обеспечивая гибкость и масштабируемость приложения.

Оглавление