Методы контекста

В Page.js объект контекста (ctx) играет ключевую роль при обработке маршрутов. Он содержит всю информацию о текущем состоянии маршрута и предоставляет методы для управления навигацией и передачи данных между middleware и обработчиками. Понимание методов контекста позволяет создавать более гибкие и мощные маршруты.

ctx.path

ctx.path возвращает строку с текущим путем запроса. Это полный путь, включающий параметры запроса, если они присутствуют.

page('/users/:id', ctx => {
  console.log(ctx.path); // "/users/42"
});
page('/users/42');

Использование ctx.path удобно для логирования и анализа переходов без необходимости вручную составлять URL.

ctx.params

ctx.params — объект, содержащий все динамические сегменты маршрута, определённые через :параметр.

page('/users/:id', ctx => {
  console.log(ctx.params.id); // "42"
});
page('/users/42');

Если маршрут содержит несколько параметров, они автоматически группируются в объект:

page('/users/:userId/posts/:postId', ctx => {
  console.log(ctx.params); // { userId: "1", postId: "99" }
});

ctx.querystring и ctx.query

ctx.querystring возвращает часть URL после знака ? в виде строки:

page('/search', ctx => {
  console.log(ctx.querystring); // "q=pagejs&sort=asc"
});
page('/search?q=pagejs&sort=asc');

ctx.query представляет собой объект с ключами и значениями, автоматически распарсенными из query string:

page('/search', ctx => {
  console.log(ctx.query); // { q: "pagejs", sort: "asc" }
});

ctx.query позволяет легко работать с параметрами запроса без необходимости ручного разбора строки.

ctx.redirect(url)

Метод ctx.redirect выполняет программную переадресацию на указанный URL. В отличие от стандартного window.location, переход происходит через маршрутизатор Page.js, что предотвращает перезагрузку страницы.

page('/old', ctx => {
  ctx.redirect('/new');
});
page('/old'); // Переходит на "/new"

Можно использовать абсолютные и относительные пути. Переадресация учитывает текущую историю браузера и поддерживает back навигацию.

ctx.replace(url)

ctx.replace аналогичен ctx.redirect, но при этом заменяет текущую запись в истории браузера вместо создания новой. Это удобно, если нужно изменить URL без возможности возвращения на предыдущий путь через кнопку “Назад”.

page('/temp', ctx => {
  ctx.replace('/home');
});

ctx.pushState и ctx.saveState

ctx.pushState позволяет вручную управлять состоянием истории браузера при навигации. Обычно используется вместе с ctx.saveState для сохранения дополнительной информации, связанной с маршрутом.

page('/profile', ctx => {
  ctx.saveState({ tab: 'settings' });
  ctx.pushState('/profile');
});

ctx.saveState сохраняет объект состояния, который можно затем получить при обратной навигации через ctx.state.

ctx.handled и ctx.canonicalPath

  • ctx.handled — логическое свойство, которое указывает, был ли маршрут обработан. Если значение true, Page.js пропускает дальнейшие middleware.
  • ctx.canonicalPath — возвращает путь без query string и hash, что полезно для нормализации URL при SEO или логировании:
page('/users/:id', ctx => {
  console.log(ctx.canonicalPath); // "/users/42"
});
page('/users/42?ref=home');

ctx.title

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

page('/about', ctx => {
  ctx.title = "О нас";
  document.title = ctx.title;
});

Часто используется вместе с middleware для централизованного управления заголовками на всех страницах приложения.

ctx.pathname и ctx.hash

  • ctx.pathname — путь без query string, например /users/42.
  • ctx.hash — часть URL после символа #, если используется якорь:
page('/docs', ctx => {
  console.log(ctx.pathname); // "/docs"
  console.log(ctx.hash);     // "#section2"
});
page('/docs#section2');

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

ctx.state и ctx.saveState

ctx.state — объект для хранения данных, которые сохраняются между переходами. Используется вместе с ctx.saveState для передачи состояния между middleware или между страницами без использования глобальных переменных.

page('/cart', ctx => {
  ctx.saveState({ items: [1,2,3] });
  console.log(ctx.state.items); // [1,2,3]
});

С помощью этого механизма можно сохранять пользовательские данные, фильтры, позиции скролла и другие элементы интерфейса.

ctx.render

Хотя ctx.render не является встроенным методом Page.js, часто создаётся как расширение middleware для рендеринга шаблонов в элемент DOM. Использование через контекст упрощает интеграцию с различными движками шаблонов:

function template(ctx, next) {
  ctx.render = (content) => {
    document.getElementById('app').innerHTML = content;
  };
  next();
}

page('/', template, ctx => {
  ctx.render('<h1>Главная страница</h1>');
});

Эффективное использование методов контекста позволяет создавать мощные SPA с динамическим управлением навигацией, состоянием и параметрами URL. Понимание этих методов является основой для построения гибких маршрутов и расширяемой архитектуры приложений на Page.js.

Оглавление