Игнорирование определенных ссылок

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

Использование атрибута data-no-routing

Одним из распространенных подходов является добавление атрибута data-no-routing к ссылкам, которые должны игнорироваться. Page.js предоставляет возможность настроить фильтрацию таких ссылок перед обработкой маршрутов.

<a href="/external" data-no-routing>Внешняя ссылка</a>
<a href="/internal">Внутренняя страница</a>
page('*', (ctx, next) => {
  const links = document.querySelectorAll('a[data-no-routing]');
  links.forEach(link => {
    link.addEventListener('click', (event) => event.stopPropagation());
  });
  next();
});

page();

В данном примере события клика по ссылкам с data-no-routing не передаются маршрутизатору, поэтому браузер выполняет переход стандартным образом.

Использование метода page.skip

Page.js позволяет явно пропускать маршруты с помощью метода page.skip. Это удобно, если нужно игнорировать определенные URL или паттерны ссылок.

page('*', (ctx, next) => {
  if (ctx.path.startsWith('/external')) {
    return page.skip();
  }
  next();
});

page();

В данном коде все ссылки, начинающиеся с /external, будут обрабатываться браузером напрямую, а остальные маршруты будут попадать под обработку Page.js.

Фильтрация ссылок по селекторам

Можно настроить глобальный фильтр для ссылок, используя селекторы CSS. Это особенно полезно при большом количестве ссылок на странице, где часть из них должна оставаться вне контроля маршрутизатора.

document.addEventListener('click', function(event) {
  const target = event.target.closest('a');
  if (!target) return;

  if (target.matches('.ignore-pagejs')) {
    return; // переход происходит стандартным образом
  }

  event.preventDefault();
  page(target.getAttribute('href'));
});
<a href="/internal" class="ignore-pagejs">Игнорируемая ссылка</a>
<a href="/dashboard">Поддерживаемая Page.js ссылка</a>

Здесь используется делегирование событий, что повышает производительность при динамически создаваемых ссылках. Ссылки с классом .ignore-pagejs игнорируются Page.js.

Игнорирование внешних ссылок и ссылок на скачивание

Page.js рекомендуется использовать только для внутренних маршрутов SPA. Ссылки на внешние сайты или файлы стоит игнорировать, чтобы не нарушать привычное поведение браузера:

document.addEventListener('click', function(event) {
  const link = event.target.closest('a');
  if (!link) return;

  const href = link.getAttribute('href');

  if (!href || href.startsWith('http') || href.endsWith('.pdf')) {
    return; // игнорируем внешние ресурсы и файлы
  }

  event.preventDefault();
  page(href);
});

Данный подход предотвращает вмешательство Page.js в переходы на сторонние сайты или скачивание файлов.

Игнорирование ссылок с модификаторами клавиш

При использовании Ctrl+Click, Cmd+Click или Shift+Click пользователь ожидает открыть ссылку в новой вкладке. Эти события также должны игнорироваться:

document.addEventListener('click', function(event) {
  const link = event.target.closest('a');
  if (!link) return;

  if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
    return; // стандартное поведение
  }

  event.preventDefault();
  page(link.getAttribute('href'));
});

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

Комбинированный подход

На практике удобно комбинировать несколько методов фильтрации:

  1. Игнорирование по атрибуту (data-no-routing).
  2. Игнорирование внешних ссылок и ссылок на файлы.
  3. Игнорирование при нажатии модификаторов клавиш.
document.addEventListener('click', function(event) {
  const link = event.target.closest('a');
  if (!link) return;

  const href = link.getAttribute('href');

  if (
    link.hasAttribute('data-no-routing') ||
    !href ||
    href.startsWith('http') ||
    href.endsWith('.pdf') ||
    event.metaKey || event.ctrlKey || event.shiftKey || event.altKey
  ) {
    return; // переход происходит стандартно
  }

  event.preventDefault();
  page(href);
});

Такой подход обеспечивает гибкость, позволяя Page.js обрабатывать только те маршруты, которые действительно относятся к SPA, без вмешательства в работу обычных ссылок.

Выводы по практическому использованию

  • Атрибуты и классы — самый простой способ пометить ссылки для игнорирования.
  • Метод page.skip() — эффективен для URL-паттернов.
  • Фильтрация событий клика — универсальный способ контролировать поведение всех ссылок на странице.
  • Сочетание методов — гарантирует корректную работу приложения, не нарушая привычное поведение браузера.

Использование этих стратегий позволяет строить SPA с Page.js, где маршрутизатор отвечает только за внутренние переходы, а остальные ссылки остаются полностью стандартными.

Оглавление