Полный список методов page()

Библиотека Page.js предоставляет легкий способ управления маршрутизацией в одностраничных приложениях на JavaScript. Основной интерфейс взаимодействия — функция page(). Она выполняет несколько ключевых задач: определение маршрутов, управление переходами между ними и настройку поведения браузера при навигации.

Синтаксис вызова может быть различным:

page(path, callback)
page(callback)
page.start()
page.show(path)
page.redirect(from, to)

Каждый метод имеет свои особенности и предназначение.

Определение маршрутов

page(path, callback)

Используется для регистрации маршрута. Параметры:

  • path — строка маршрута, например '/about', '/users/:id'. Поддерживаются параметры и регулярные выражения.
  • callback — функция, вызываемая при совпадении URL с маршрутом. Получает объект ctx с информацией о маршруте.

Пример:

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

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

  • Поддержка динамических сегментов через :param.
  • Можно указывать несколько обработчиков для одного маршрута.
  • Встроенная поддержка query-параметров через ctx.querystring.

page(callback)

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

page((ctx, next) => {
  console.log('Переход к:', ctx.path);
  next();
});

Ключевой момент: обязательно вызывать next() для передачи управления следующему middleware или обработчику маршрута.

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

page.start(options)

Запускает маршрутизатор. Параметры:

  • options.dispatch — true по умолчанию. Если false, начальная навигация не будет вызвана автоматически.
  • options.decodeURLComponents — true по умолчанию, декодирует URL перед сопоставлением с маршрутом.

Пример:

page.start({ dispatch: true, decodeURLComponents: true });

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

  • После вызова page.start() начинаются отслеживания изменений истории браузера.
  • Без вызова page.start() маршруты не будут работать.

page.show(path, state, dispatch)

Позволяет программно инициировать переход к указанному маршруту. Параметры:

  • path — целевой путь.
  • state — объект состояния, аналогично history.pushState.
  • dispatch — если false, обработчики маршрутов не будут вызваны, но URL изменится.

Пример:

page.show('/dashboard', { user: '123' });

page.redirect(from, to)

Определяет редирект с одного маршрута на другой. Используется для перенаправления устаревших URL или при авторизации.

page.redirect('/home', '/dashboard');

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

  • Работает до того, как маршрут будет обработан.
  • Можно использовать как middleware, чтобы перенаправлять по условию:
page('/admin', (ctx, next) => {
  if (!ctx.user.isAdmin) page.redirect('/login');
  else next();
});

Работа с контекстом маршрута

Объект ctx, передаваемый каждому callback, содержит:

  • ctx.path — текущий путь.
  • ctx.params — параметры маршрута (/users/:id → { id: '123' }).
  • ctx.querystring — строка запроса (?page=2).
  • ctx.state — объект состояния, переданный в page.show() или при редиректе.
  • ctx.title — позволяет задать заголовок документа.

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

page('/search/:term', (ctx) => {
  const query = new URLSearchParams(ctx.querystring);
  console.log(ctx.params.term, query.get('page'));
});

Middleware и порядок вызова

Page.js поддерживает цепочку middleware, которая вызывается последовательно. Порядок регистрации важен: глобальные middleware, зарегистрированные без пути, срабатывают первыми, затем — маршруты с конкретным path. Middleware может завершать цепочку без вызова next(), что предотвращает выполнение следующих обработчиков.

Пример цепочки:

page((ctx, next) => {
  console.log('Глобальный middleware');
  next();
});

page('/profile', (ctx, next) => {
  console.log('Маршрут /profile');
  next();
});

page('/profile', (ctx) => {
  console.log('Финальный обработчик');
});

Работа с History API

Page.js использует history.pushState и popstate для управления навигацией без перезагрузки страницы. Это позволяет:

  • Изменять URL в адресной строке без перезагрузки.
  • Использовать кнопки «Назад» и «Вперед» нативного браузера.
  • Передавать состояние через объект state.

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

  • page.show() и page.redirect() вызывают history.pushState.
  • Переход по кнопкам браузера вызывает popstate, который обрабатывается Page.js.

Дополнительные возможности

  1. Регулярные выражения для маршрутов:
page(/^\/product\/(\d+)$/, (ctx) => {
  console.log(ctx.params[0]); // ID продукта
});
  1. Асинхронная навигация:

Middleware могут быть асинхронными:

page('/dashboard', async (ctx, next) => {
  await fetchUserData();
  next();
});
  1. Отмена перехода:

Если middleware не вызывает next() и не делает page.redirect(), переход считается остановленным.

  1. Управление заголовком документа:
page('/about', (ctx) => {
  ctx.title = 'О компании';
  document.title = ctx.title;
});

Page.js предлагает полный контроль над маршрутизацией с минимальными усилиями, предоставляя методы page(), start(), show(), redirect() и удобный объект ctx для передачи данных между обработчиками. Такой подход позволяет строить сложные одностраничные приложения с динамическими маршрутами, редиректами и middleware, не завися от тяжелых фреймворков.

Оглавление