Проверка изменения URL

Библиотека Page.js предоставляет удобный способ управления маршрутизацией на стороне клиента в одностраничных приложениях (SPA). Одной из ключевых возможностей является отслеживание изменений URL и соответствующая обработка переходов без перезагрузки страницы.

Основы маршрутизации

Маршруты в Page.js задаются с помощью функции page(path, callback). path — это путь URL, который должен обрабатываться, а callback — функция, вызываемая при совпадении маршрута. Пример базового определения маршрута:

page('/home', () => {
  console.log('Пользователь перешел на /home');
});

При вызове page() без аргументов библиотека запускает обработку текущего URL:

page();

Это позволяет сразу определить текущую страницу при загрузке приложения.

Проверка изменений URL

Page.js использует HTML5 History API, что позволяет отслеживать изменения URL без перезагрузки страницы. Ключевой метод для этого — регистрация маршрутов с колбэками. Любое изменение URL, вызванное пользователем или программно, будет автоматически проверяться библиотекой, если маршруты определены корректно.

page('/about', () => {
  console.log('URL изменен на /about');
});
page('/contact', () => {
  console.log('URL изменен на /contact');
});
page();

Программное изменение URL

Для программного изменения URL используется функция page.show(path). Этот метод изменяет адресную строку и вызывает соответствующий маршрут:

page.show('/about'); // Выведет 'URL изменен на /about'

page.show может принимать второй аргумент — объект опций. Основные опции:

  • replace: true — заменяет текущую запись в истории браузера, не создавая новую.
  • dispatch: false — изменяет URL без вызова обработчиков маршрутов.
  • state: {...} — добавляет объект состояния в запись истории.

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

page.show('/contact', { replace: true, state: { from: 'home' } });

Отслеживание всех изменений URL

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

page((ctx, next) => {
  console.log(`Изменился URL на ${ctx.path}`);
  next();
});

Middleware срабатывает перед любым маршрутом и получает объект ctx (контекст маршрута). Полезные свойства ctx:

  • ctx.path — путь без хоста и параметров.
  • ctx.querystring — строка запроса (например, ?id=123).
  • ctx.params — параметры маршрута (например, для /user/:id будет доступно ctx.params.id).

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

Page.js поддерживает динамические сегменты URL. Например:

page('/user/:id', (ctx) => {
  console.log(`Пользователь с ID: ${ctx.params.id}`);
});

Любое изменение URL, соответствующее шаблону /user/:id, автоматически будет перехвачено и обработано. Это удобно для SPA с динамическим контентом.

Слушатели изменения URL без перезагрузки

Page.js можно использовать совместно с событиями popstate для расширенного контроля:

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

Однако чаще всего этого не требуется, так как сама библиотека Page.js перехватывает все действия history.pushState и history.replaceState.

Практические рекомендации

  • Регистрация middleware перед маршрутизированием позволяет логировать или проверять все изменения URL.
  • Использование page.show с опцией dispatch: false удобно для программного изменения URL без вызова обработчиков.
  • Динамические маршруты с параметрами обеспечивают гибкую проверку URL, особенно при работе с деталями сущностей (например, профили пользователей, страницы товаров).
  • Инициализация page() после всех маршрутов обязательна для корректной проверки текущего URL при загрузке страницы.

Примеры комплексного отслеживания

page((ctx, next) => {
  console.log(`Новый путь: ${ctx.path}, строка запроса: ${ctx.querystring}`);
  next();
});

page('/dashboard', () => {
  console.log('Перешли на дашборд');
});

page('/dashboard/:section', (ctx) => {
  console.log(`Открыта секция: ${ctx.params.section}`);
});

page();

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

Оглавление