Внешние и внутренние ссылки

Основы маршрутизации

Page.js — это легковесная библиотека для маршрутизации в одностраничных приложениях (SPA) на JavaScript. Она позволяет управлять переходами между различными представлениями без перезагрузки страницы. Важным аспектом является различие между внутренними и внешними ссылками, так как обработка каждого типа требует разного подхода.

Внутренние ссылки — это ссылки, ведущие на страницы внутри текущего приложения. Их обработка полностью контролируется Page.js через функцию page(path, callback). Внешние ссылки — это ссылки на ресурсы за пределами SPA. Они должны открываться стандартным образом через браузер.

Настройка внутренних ссылок

Для корректной работы внутренних ссылок используется синтаксис:

page('/home', () => {
    console.log('Отображение домашней страницы');
});

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

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

document.addEventListener('click', function(e) {
    const target = e.target.closest('a[href]');
    if (!target) return;

    const href = target.getAttribute('href');
    if (href.startsWith('http') || href.startsWith('//')) return;

    e.preventDefault();
    page.show(href);
});

Ключевой момент: важно проверять, чтобы ссылка не вела на внешний ресурс. В противном случае браузер должен открыть её стандартным образом.

Работа с внешними ссылками

Внешние ссылки, как правило, имеют абсолютный URL или протокол http/https. Page.js не должен перехватывать такие переходы. Можно использовать следующие подходы:

  1. Использовать атрибут target="_blank" для открытия в новой вкладке:
<a href="https://example.com" target="_blank">Внешний ресурс</a>
  1. Пропускать обработку Page.js через проверку в обработчике клика:
if (href.startsWith('http') || href.startsWith('//')) return;

Это предотвращает конфликт между SPA и обычной навигацией.

Навигация программным методом

Page.js предоставляет метод page.show(path, [state], [dispatch]) для программного перехода:

// Переход на внутреннюю страницу
page.show('/about');

// Переход с добавлением состояния
page.show('/profile', { userId: 123 });

Метод page.show полезен для динамических переходов, например, после отправки формы или клика по кнопке, которая не является ссылкой <a>.

Параметры маршрутов и динамические ссылки

Page.js позволяет использовать динамические сегменты URL:

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

При этом ссылки на такие маршруты могут быть сформированы как:

<a href="/user/42">Профиль пользователя 42</a>

Page.js автоматически подставит значение параметра в объект ctx.params.

Обработка событий навигации

Для контроля переходов можно использовать middleware:

page('*', (ctx, next) => {
    console.log(`Навигация на: ${ctx.path}`);
    next();
});

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

SEO и внешние ссылки

SPA с Page.js может сталкиваться с проблемами SEO при использовании внутренних ссылок, так как поисковые роботы могут не выполнять JavaScript. Для внешних ссылок это не критично, так как они открываются стандартным образом. Рекомендуется:

  • Для внутренних ссылок использовать <a href> даже при программной навигации.
  • Добавлять rel="noopener noreferrer" для внешних ссылок, открывающихся в новой вкладке, чтобы повысить безопасность и производительность.

Обработка ошибок навигации

При неправильном URL или отсутствии маршрута важно определить обработку 404:

page('*', () => {
    document.body.innerHTML = '<h1>Страница не найдена</h1>';
});

Это универсальный обработчик для всех ссылок, включая внутренние и потенциально некорректные внешние переходы внутри приложения.

Резюме по ссылкам

  • Внутренние ссылки обрабатываются Page.js через маршруты и могут использовать динамические параметры.
  • Внешние ссылки должны игнорироваться Page.js и открываться стандартным способом.
  • Программная навигация через page.show позволяет переходить без клика по <a>.
  • Middleware обеспечивает контроль всех переходов, что полезно для логирования, авторизации и аналитики.
  • Проверка URL перед вызовом page.show предотвращает случайный перехват внешних ссылок.

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

Оглавление