Трейсинг переходов

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

Создание маршрутизатора происходит следующим образом:

import Navigo from 'navigo';

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

Параметр '/' задаёт корневой URL приложения, а hash: true указывает на использование хэш-роутинга. При hash: false маршруты будут работать через HTML5 History API.

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

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

router.on('/about', () => {
  console.log('О сайте');
});

Метод resolve запускает проверку текущего URL и вызов соответствующего обработчика:

router.resolve();

Трейсинг переходов

Трейсинг переходов (tracking или tracing) в контексте Navigo позволяет отслеживать изменение маршрутов, фиксировать активные пути и управлять состоянием приложения при переходах.

Подписка на все переходы

Для глобального отслеживания изменений URL используется метод hooks и событие before:

router.hooks({
  before: (done, params, route) => {
    console.log('Переход на маршрут:', route.url);
    done();
  }
});
  • done() — функция обратного вызова, обязательная для продолжения перехода.
  • params — объект с параметрами маршрута.
  • route — объект текущего маршрута, содержащий информацию о пути и метаданных.

Аналогично можно использовать after для действий после завершения перехода:

router.hooks({
  after: (params, route) => {
    console.log('Переход завершён на маршруте:', route.url);
  }
});

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

Navigo поддерживает динамические сегменты URL через двоеточие:

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

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

router.hooks({
  before: (done, params, route) => {
    console.log(`Переход к пользователю с ID ${params.id}`);
    done();
  }
});

Это позволяет логировать и модифицировать переходы в зависимости от параметров.

Логирование всех маршрутов

Для полного трейсинга всех доступных маршрутов можно перебрать их при инициализации:

const routes = [
  { path: '/home', handler: () => {} },
  { path: '/about', handler: () => {} },
  { path: '/user/:id', handler: () => {} }
];

routes.forEach(r => {
  router.on(r.path, r.handler);
});

router.hooks({
  before: (done, params, route) => {
    console.log('Переход на маршрут:', route.url, 'с параметрами', params);
    done();
  }
});

Такой подход создаёт централизованное место для мониторинга всех переходов.

Управление состоянием при переходах

Navigo позволяет не только отслеживать маршруты, но и сохранять состояние приложения. Например, можно хранить историю посещений или текущий активный маршрут:

let historyStack = [];

router.hooks({
  after: (params, route) => {
    historyStack.push(route.url);
    console.log('История маршрутов:', historyStack);
  }
});

Использование такой стратегии упрощает реализацию навигации «назад/вперед» без зависимости от браузерного history.

Прерывание переходов

Трейсинг часто требует проверки условий перед сменой маршрута. Это достигается через before и возможность не вызывать done сразу:

router.hooks({
  before: (done, params, route) => {
    if (!isAuthenticated()) {
      console.log('Доступ запрещён, перенаправление на /login');
      router.navigate('/login');
    } else {
      done();
    }
  }
});

Такой подход позволяет внедрять авторизацию и защиту маршрутов без сторонних библиотек.

Асинхронные операции в трейсинге

Navigo поддерживает асинхронные проверки перед переходом:

router.hooks({
  before: async (done, params, route) => {
    await fetchUserData(params.id);
    done();
  }
});

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

Поддержка wildcard-маршрутов

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

router.on('/posts/*', (params) => {
  console.log('Любой маршрут в /posts:', params);
});

Wildcard маршруты дают гибкость при организации разделов сайта с большим числом динамических подстраниц.

Отслеживание истории браузера

При использовании HTML5 History API можно подключить слушатель события popstate для синхронизации состояния:

window.addEventListener('popstate', (event) => {
  console.log('История браузера изменилась:', event.state);
});

В сочетании с хуками Navigo это обеспечивает полный контроль над всеми переходами и состоянием приложения.

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

Оглавление