Свойство ctx.path

В библиотеке Page.js объект контекста ctx играет центральную роль при маршрутизации. Одним из ключевых свойств этого объекта является ctx.path. Оно представляет собой полный путь URL, который был использован для вызова текущего маршрута, включая все сегменты, но без домена и протокола. Это свойство позволяет получить точное отображение того, как пользователь перешёл на страницу, что особенно важно при динамических маршрутах и сложной логике обработки URL.

Структура и особенности ctx.path

  • ctx.path всегда возвращает строку, содержащую путь запроса начиная с символа /.
  • Не включает query string (?key=value) и hash (#anchor). Для этих частей существуют отдельные свойства: ctx.querystring и ctx.hash.
  • Всегда отражает реальный путь, по которому был инициирован маршрут, даже если маршрут был перенаправлен с использованием page.redirect().

Пример структуры:

{
  path: "/users/123/profile",
  params: { id: "123" },
  querystring: "tab=posts",
  hash: "#section1"
}

В данном примере ctx.path равен "/users/123/profile".

Использование ctx.path для маршрутов

  1. Отображение текущего пути

Можно использовать ctx.path для динамического обновления элементов интерфейса, таких как активные ссылки меню:

page('/home', ctx => {
  const menuItem = document.querySelector('.menu-item.home');
  if (ctx.path === '/home') {
    menuItem.classList.add('active');
  }
});
  1. Логика маршрутов с параметрами

При работе с параметризованными маршрутами ctx.path помогает получить полный путь без необходимости вручную составлять URL из ctx.params:

page('/users/:id', ctx => {
  console.log(ctx.path); // "/users/42"
  console.log(ctx.params.id); // "42"
});
  1. Обработка редиректов и подмаршрутов

ctx.path сохраняет исходный путь, даже если страница была перенаправлена:

page('/old-route', ctx => {
  page.redirect('/new-route');
});

page('/new-route', ctx => {
  console.log(ctx.path); // "/new-route"
});

Это позволяет вести точный учёт переходов и строить логику аналитики на стороне клиента.

Отличие ctx.path от других свойств ctx

Свойство Описание
ctx.path Полный путь запроса без домена и протокола, без query string и hash
ctx.params Объект параметров маршрута (:id, :slug)
ctx.querystring Строка после ? в URL (например, key=value&foo=bar)
ctx.hash Строка после # в URL
ctx.pathname Путь запроса без query string и hash (похоже на ctx.path, но иногда используется при серверном рендеринге)

Основное отличие ctx.path в том, что оно точно соответствует пути, введённому или сгенерированному пользователем, и может использоваться для любых проверок маршрутов.

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

  1. Сравнение текущего пути с шаблонами маршрутов
page('*', ctx => {
  if (ctx.path.startsWith('/admin')) {
    console.log('Пользователь находится в админке');
  }
});
  1. Управление отображением компонентов на основе пути
page('/dashboard', ctx => {
  const dashboardSection = document.querySelector('#dashboard');
  dashboardSection.style.display = ctx.path === '/dashboard' ? 'block' : 'none';
});
  1. Логирование и аналитика
page('*', ctx => {
  console.log(`Пользователь перешёл на путь: ${ctx.path}`);
});

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

Взаимодействие ctx.path с динамическими маршрутами

Для маршрутов с переменными сегментами (:id, :slug) ctx.path содержит исходный URL, что позволяет легко:

  • Проверять конкретный маршрут перед выполнением действий;
  • Сравнивать пути с регулярными выражениями;
  • Формировать breadcrumbs и хлебные крошки без дополнительного парсинга.

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

page('*', ctx => {
  if (/^\/products\/\d+/.test(ctx.path)) {
    console.log('Просмотр страницы продукта');
  }
});

Здесь ctx.path напрямую позволяет сопоставлять маршруты с паттернами без необходимости вручную извлекать параметры.

Свойство ctx.path является фундаментальным инструментом для работы с маршрутами в Page.js, позволяя точно отслеживать и управлять навигацией, независимо от параметров и редиректов. Оно обеспечивает прямой доступ к реальному URL-пути и служит основой для динамических проверок, аналитики и условного рендеринга контента.

Оглавление