События

Navigo — это современная библиотека для маршрутизации на клиентской стороне в JavaScript, позволяющая управлять переходами между “страницами” одностраничного приложения без перезагрузки. Одним из ключевых аспектов работы с Navigo является обработка событий маршрутизатора, которые позволяют контролировать жизненный цикл переходов и реагировать на изменения состояния маршрутов.

Типы событий

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

  1. on – добавление обработчиков событий маршрутизатора.
  2. before – вызов функции перед выполнением маршрута, возможность отменить переход.
  3. after – обработчик после завершения маршрута.
  4. error – обработка ошибок при попытке навигации к несуществующему маршруту.

Метод on и его использование

Метод on используется для регистрации обработчиков маршрутов и событий. Его базовый синтаксис выглядит следующим образом:

const router = new Navigo('/');

router.on({
    '/home': () => { console.log('Маршрут /home активирован'); },
    '/about': () => { console.log('Маршрут /about активирован'); }
}).resolve();
  • Ключи объекта соответствуют маршрутам.
  • Значения — функции, выполняемые при совпадении URL с маршрутом.
  • Метод resolve() инициирует проверку текущего URL и выполнение соответствующего обработчика.

Обработчики могут быть как простыми функциями, так и асинхронными вызовами для подгрузки данных перед отображением контента.

Событие before

Событие before позволяет перехватывать переходы и выполнять действия до изменения состояния маршрута. Это полезно для проверки авторизации, сохранения данных формы или отмены перехода. Синтаксис:

router.before((done, match) => {
    if (!userIsLoggedIn && match.url !== '/login') {
        router.navigate('/login');
        done(false); // отмена перехода
    } else {
        done(); // разрешение перехода
    }
});

  • done — функция, которая должна быть вызвана для продолжения или отмены перехода.

    • done() — разрешить переход.
    • done(false) — отменить переход.

  • match — объект, содержащий информацию о маршруте, включая URL, параметры и query-параметры.

before можно использовать для асинхронных операций:

router.before(async (done, match) => {
    const canNavigate = await checkUserPermissions(match.url);
    done(canNavigate);
});

Событие after

Событие after вызывается после того, как Navigo обработал маршрут. Это удобно для логирования переходов или изменения состояния интерфейса:

router.after((match) => {
    console.log(`Переход на ${match.url} завершен`);
});
  • Параметр match содержит информацию о маршруте: URL, параметры, query-параметры.
  • Можно использовать для обновления истории навигации, счетчиков посещений или аналитики.

Событие error

Событие error срабатывает, если не найден соответствующий маршрут. Используется для отображения страниц 404 или логирования ошибок:

router.notFound(() => {
    console.error('Маршрут не найден');
});
  • Для Navigo версии 8 и выше существует метод notFound, аналогичный обработчику ошибок.
  • Можно перенаправлять на страницу по умолчанию:
router.notFound(() => router.navigate('/home'));

Важные аспекты работы с событиями

  1. Последовательность вызова

    • Сначала вызывается before, затем on, затем after.
    • Если before отменяет переход, обработчик маршрута и after не выполняются.

  2. Асинхронность

    • Все события поддерживают асинхронные операции через промисы или async/await.
    • Асинхронные проверки в before позволяют корректно контролировать доступ к маршрутам.

  3. Передача параметров маршрута

    • Параметры URL, например /user/:id, передаются в объект match.params.
    • Пример использования:
router.on('/user/:id', (match) => {
    console.log(`ID пользователя: ${match.params.id}`);
});

  1. Глобальные события

    • Navigo позволяет назначать глобальные before и after для всех маршрутов.
    • Локальные события для конкретного маршрута можно задать через объект конфигурации при on.

Практические примеры

Логирование переходов с асинхронной проверкой:

router.before(async (done, match) => {
    console.log(`Попытка перехода на ${match.url}`);
    const hasAccess = await checkAccess(match.url);
    done(hasAccess);
});

router.on('/dashboard', () => {
    console.log('Открыт Dashboard');
});

router.after((match) => {
    console.log(`Завершен переход на ${match.url}`);
});

Обработка маршрутов с параметрами и query:

router.on('/search/:query', (match) => {
    const { query } = match.params;
    const { page = 1 } = match.query;
    console.log(`Поиск: ${query}, страница: ${page}`);
});

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

Оглавление