Настройка обработки ссылок

Для начала необходимо подключить библиотеку Page.js в проект. Она может быть установлена через npm:

npm install page

или подключена напрямую через CDN:

После подключения создаётся основной объект маршрутизатора с помощью функции page(). Например:

import page from 'page';

page('/', () => {
    console.log('Главная страница');
});

page('/about', () => {
    console.log('Страница "О нас"');
});

page();

Функция page() без аргументов запускает обработку маршрутов и связывает их с текущим состоянием URL.

Перехват и обработка ссылок

Page.js позволяет автоматически перехватывать клики по ссылкам внутри страницы и обрабатывать их без перезагрузки. Для этого важно настроить делегирование событий:

page.start();

При вызове page.start() библиотека отслеживает все клики по тегам и перенаправляет их через маршрутизатор. Можно указать дополнительные опции:

page.start({
    click: true,      // включение перехвата кликов по ссылкам
    popstate: true,   // обработка навигации назад/вперед
    dispatch: true    // немедленный вызов текущего маршрута при старте
});

Ключевые моменты настройки кликов по ссылкам:

  • Ссылки с внешними URL (домен отличается) игнорируются.
  • Ссылки с target="_blank" также не обрабатываются Page.js.
  • При добавлении обработчиков важно проверять, чтобы не происходил конфликт с другими событиями click.

Использование page.show()

Метод page.show(path) позволяет программно изменять маршрут, не дожидаясь клика пользователя. Это особенно удобно для динамических элементов интерфейса:

document.querySelector('#btn-about').addEventListener('click', () => {
    page.show('/about');
});

При этом вызываются все обработчики маршрута, привязанные к указанному пути.

Определение глобальных и локальных обработчиков

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

function auth(ctx, next) {
    if (!ctx.user) {
        page.redirect('/login');
    } else {
        next();
    }
}

page('/profile', auth, () => {
    console.log('Профиль пользователя');
});

Промежуточные функции получают объект ctx с информацией о текущем пути и функцию next(), которая передаёт управление следующему обработчику.

Работа с параметрами ссылок

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

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

При клике на Профиль объект ctx.params будет содержать { id: "42" }.

Обработка query-параметров

Page.js не парсит query-параметры автоматически, но их можно получить из ctx.querystring:

page('/search', ctx => {
    const params = new URLSearchParams(ctx.querystring);
    const query = params.get('q');
    console.log('Поиск по запросу:', query);
});

При переходе по ссылке /search?q=javascript значение переменной query будет равно "javascript".

Настройка исключений и фильтров

Иногда нужно исключить определённые ссылки из обработки Page.js. Для этого можно использовать атрибут data-no-routing:

Внешняя ссылка

Обработчик Page.js проверяет наличие этого атрибута и пропускает такие клики.

Альтернативно, можно написать глобальный фильтр для кликов:

page('*', (ctx, next) => {
    if (ctx.path.startsWith('/api')) {
        return; // игнорируем API-запросы
    }
    next();
});

Настройка History API и режима Hash

По умолчанию Page.js использует HTML5 History API. Для поддержки старых браузеров можно включить hash-режим:

page.start({ hashbang: true });

В этом случае URL будут иметь вид /#/about, и библиотека корректно обрабатывает такие маршруты без перезагрузки страницы.

Оптимизация обработки кликов

Чтобы уменьшить количество ненужных срабатываний, рекомендуется:

  • Ограничивать делегирование кликов к корневому контейнеру приложения.
  • Игнорировать ссылки с внешними доменами и модификаторами (Ctrl, Shift, Alt).
  • Использовать middleware для общих проверок (например, авторизация или логирование).

Пример:

document.body.addEventListener('click', e => {
    if (e.metaKey || e.ctrlKey || e.shiftKey) return;
    const link = e.target.closest('a');
    if (!link || link.host !== window.location.host) return;
    e.preventDefault();
    page.show(link.pathname + link.search);
});

Этот подход даёт полный контроль над обработкой ссылок, сохраняя преимущества Page.js.

Оглавление