Модификация поведения

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

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

Параметр root позволяет задать базовый путь для всех маршрутов. Это особенно важно, если приложение размещено не в корне домена.

const router = new Navigo('/app/', { hash: false });
  • hash: false — отключает использование хэшей (#) в URL.
  • Все маршруты будут относиться к /app/, например, маршрут /dashboard будет разрешаться как /app/dashboard.

Изменение базового пути позволяет гибко интегрировать Navigo с различными серверными конфигурациями без изменения логики маршрутизации.

Использование динамических параметров

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

router.on('/user/:id', (params) => {
    console.log(params.id);
});
  • :id — динамический параметр.
  • params — объект, содержащий все динамические сегменты.

Модификация поведения с параметрами включает:

  1. Ограничение формата с помощью регулярных выражений:
router.on('/user/:id(\\d+)', (params) => {
    console.log(params.id); // Только числа
});
  1. Создание необязательных параметров с ?:
router.on('/search/:query?', (params) => {
    console.log(params.query || 'поиск пустой');
});

Управление историей и стратегией перехода

Navigo поддерживает два режима работы с историей: через History API и через хэши.

const router = new Navigo('/', { hash: true });
  • hash: true — URL будет содержать #, например /#/about.
  • router.navigate('/about') автоматически обновляет URL и вызывает соответствующий обработчик.

Можно модифицировать поведение навигации с помощью опций метода navigate:

router.navigate('/contact', { trigger: true, replace: false });
  • trigger — если true, обработчик маршрута выполняется немедленно.
  • replace — если true, текущая запись в истории заменяется новым URL вместо добавления новой.

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

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

router.notFound(() => {
    console.log('Маршрут не найден');
});

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

Вложенные маршруты и их модификация

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

router.on({
    '/dashboard': () => { console.log('Dashboard'); },
    '/dashboard/settings': () => { console.log('Settings'); }
});
  • Вложенные маршруты разрешаются с учётом базового пути и предыдущих сегментов.
  • Можно динамически модифицировать поведение, добавляя промежуточные проверки:
router.hooks({
    before: (done, params) => {
        if (!params.user) {
            console.log('Пользователь не авторизован');
            done(false);
        } else {
            done();
        }
    }
});

Хуки для модификации обработки маршрутов

Navigo поддерживает хуки, позволяющие вмешиваться в процесс навигации:

  1. before — выполняется перед вызовом обработчика маршрута. Можно остановить переход.
  2. after — выполняется после обработки маршрута, полезно для аналитики или UI-эффектов.
router.hooks({
    before: (done, params) => {
        console.log('Перед переходом', params);
        done();
    },
    after: (params) => {
        console.log('После перехода', params);
    }
});
  • Хуки позволяют модифицировать поведение без изменения основного кода обработчиков маршрутов.
  • В before можно выполнять асинхронные проверки, например, запросы к серверу, и блокировать маршрут, если условие не выполнено.

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

  • Строгое сопоставление: путь должен полностью совпадать с маршрутом.
  • Ленивое сопоставление: используется *, что позволяет захватывать остаток URL.
router.on('/blog/*', (params) => {
    console.log('Путь к блогу:', params[0]);
});
  • Символ * захватывает все сегменты после /blog/.
  • Модификация поведения с ленивым сопоставлением позволяет создавать универсальные обработчики для коллекций или вложенных страниц.

Программная модификация маршрутов

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

router.on('/new-route', () => { console.log('Новый маршрут добавлен'); });
router.off('/new-route'); // Удаление маршрута
  • Использование on и off позволяет создавать маршруты только при необходимости, изменяя логику SPA без перезагрузки страницы.

Итоговые возможности модификации поведения

  • Настройка базового пути и стратегии URL.
  • Динамические и необязательные параметры с проверкой формата.
  • Управление историей через navigate, replace и trigger.
  • Обработка несуществующих маршрутов через notFound.
  • Вложенные маршруты и хуки для асинхронных проверок и блокировки переходов.
  • Ленивое сопоставление и универсальные обработчики через *.
  • Программное добавление и удаление маршрутов.

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

Оглавление