Свойство ctx.pathname

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

ctx.pathname хранит строку с путём запроса без хоста, протокола и параметров строки запроса, то есть только путь в URL. Это свойство играет критическую роль при реализации навигации и логики маршрутов, так как позволяет точно определить, какой путь был вызван пользователем или через вызов page.show().

Основные характеристики ctx.pathname

  1. Чистый путь URL Пример: если URL браузера —

    https://example.com/products/42?ref=home

    то ctx.pathname будет:

    "/products/42"

    Здесь не включены параметры запроса (?ref=home) и хэш-фрагмент (#section).

  2. Сравнение маршрутов Свойство ctx.pathname удобно использовать для сравнения текущего пути с заданными маршрутами:

    page('/products/:id', (ctx) => {
    if (ctx.pathname === '/products/42') {
        console.log('Пользователь на странице товара 42');
    }
});

  3. Динамические сегменты URL При использовании динамических маршрутов, таких как /products/:id, ctx.pathname возвращает фактический путь, который ввёл пользователь, без подстановки параметров:

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

    Таким образом, ctx.pathname и ctx.params дополняют друг друга: первый показывает путь полностью, второй — конкретные значения динамических сегментов.

Использование в навигации и условной логике

ctx.pathname часто применяется для:

  • Активных ссылок меню

    page('*', (ctx) => {
    document.querySelectorAll('nav a').forEach(link => {
        link.classList.toggle('active', link.getAttribute('href') === ctx.pathname);
    });
});

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

  • Логики редиректов

    page('*', (ctx, next) => {
    if (ctx.pathname === '/') {
        page.redirect('/home');
    } else {
        next();
    }
});

    Здесь проверка ctx.pathname гарантирует, что редирект сработает только при точном совпадении пути.

  • Аналитики и трекинга Встраивание аналитики часто требует записи точного пути страницы:

    page('*', (ctx) => {
    analytics.trackPage(ctx.pathname);
});

    Это более корректно, чем использовать window.location.pathname, так как Page.js может управлять виртуальными маршрутами без полной перезагрузки страницы.

Взаимодействие с другими свойствами ctx

  • ctx.path — включает путь и параметры запроса.
  • ctx.querystring — содержит только параметры после ?.
  • ctx.params — объект динамических сегментов маршрута.

Пример различий:

page('/products/:id', (ctx) => {
    console.log(ctx.pathname);    // '/products/42'
    console.log(ctx.path);        // '/products/42?ref=home'
    console.log(ctx.querystring); // 'ref=home'
    console.log(ctx.params.id);   // '42'
});

Такое разделение позволяет гибко обрабатывать URL: проверять маршрут, извлекать параметры и формировать ссылки для редиректов.

Особенности при работе с вложенными маршрутами

Для вложенных или wildcard-маршрутов (*) свойство ctx.pathname всегда возвращает абсолютный путь относительно корня:

page('/products/*', (ctx) => {
    console.log(ctx.pathname); // '/products/42/details'
});

Это гарантирует корректное сопоставление маршрутов, даже если часть пути передаётся через wildcard.

Резюме по ctx.pathname

  • Содержит только путь URL, без хоста, протокола, параметров и хэша.
  • Используется для точного сопоставления маршрутов и управления активными состояниями элементов интерфейса.
  • Отличается от ctx.path и ctx.querystring, предоставляя чистый путь без дополнительной информации.
  • Совместно с ctx.params и другими свойствами обеспечивает полную гибкость при реализации динамических маршрутов и редиректов.

ctx.pathname — основной инструмент для контроля текущего пути, обеспечения правильной логики маршрутизации и управления пользовательским интерфейсом в Page.js.

Оглавление