Базовая навигация

Page.js — это компактная библиотека для маршрутизации на стороне клиента в приложениях на JavaScript. Она позволяет управлять переходами между “страницами” без перезагрузки браузера, используя концепцию single-page application (SPA).

Для использования библиотеки достаточно подключить её через npm или CDN:

// Через npm
npm install page

// Через CDN
<script src="https://unpkg.com/page/page.js"></script>

После подключения библиотеку можно использовать через объект page.

Основные принципы работы

Page.js использует маршруты для определения, какой код выполнять при изменении URL. Маршрут задаётся строкой пути и функцией-обработчиком:

page('/home', function(ctx) {
  console.log('Мы на домашней странице');
});

Ключевые моменты:

  • '/home' — путь, по которому сработает обработчик.
  • ctx (context) — объект с информацией о маршруте (например, путь, параметры, query-параметры).
  • Функция вызывается каждый раз, когда URL соответствует маршруту.

После определения маршрутов необходимо запустить Page.js:

page();

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

Динамические маршруты

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

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

Особенности:

  • :id — параметр маршрута. Имя после двоеточия используется в ctx.params.
  • Можно задавать несколько параметров: /post/:postId/comment/:commentId.

Пример с несколькими параметрами:

page('/post/:postId/comment/:commentId', function(ctx) {
  console.log(`Пост: ${ctx.params.postId}, Комментарий: ${ctx.params.commentId}`);
});

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

Page.js позволяет работать с query-параметрами URL. Они доступны через ctx.querystring:

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

ctx.querystring возвращает строку после ? в URL, что позволяет гибко работать с параметрами запроса.

Навигация без перезагрузки страницы

Page.js позволяет программно изменять URL без полной перезагрузки страницы, используя метод page.show():

page.show('/home');
page.show('/user/123');

Особенности:

  • Срабатывают обработчики маршрутов.
  • URL обновляется в браузере, как при обычной навигации.
  • Позволяет создавать SPA с динамическим контентом.

Для обычных ссылок можно использовать обычный <a> с атрибутом href, а Page.js перехватит клик:

<a href="/about">О нас</a>

Чтобы перехватывать клики по ссылкам, Page.js автоматически применяет поведение, если включен:

page({click: true});

Middleware и последовательность обработки

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

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

page('/dashboard', auth, function(ctx) {
  console.log('Доступ разрешён');
});

Принципы работы middleware:

  • Функция принимает ctx и next.
  • Вызов next() передаёт управление следующему middleware или конечному обработчику.
  • Можно использовать несколько middleware последовательно:
page('/profile', middleware1, middleware2, finalHandler);

Обработка несуществующих маршрутов

Для обработки неизвестных путей можно задать маршрут с '*':

page('*', function(ctx) {
  console.log('Страница не найдена:', ctx.path);
});

Такой маршрут сработает, если ни один из предыдущих не подошёл.

Программное управление историей

Page.js работает с HTML5 History API, что позволяет контролировать навигацию:

  • page.back() — переход на предыдущую страницу в истории.
  • page.redirect('/path') — перенаправление без необходимости повторного клика или вызова обработчика вручную.

Пример редиректа:

page('/old-page', function() {
  page.redirect('/new-page');
});

Примеры объединённой навигации

Комбинируя маршруты, middleware и динамические параметры, можно построить полноценную SPA:

page('/', homeHandler);
page('/about', aboutHandler);
page('/user/:id', auth, userHandler);
page('*', notFoundHandler);

page();
  • Главная страница: /
  • Страница о проекте: /about
  • Страница пользователя: /user/123
  • Любой неизвестный URL: * → обработчик 404

Работа с асинхронными операциями

Middleware и обработчики могут быть асинхронными:

page('/user/:id', async function(ctx, next) {
  const data = await fetchUser(ctx.params.id);
  ctx.userData = data;
  next();
});

page('/user/:id', function(ctx) {
  renderUser(ctx.userData);
});

Ключевые моменты:

  • Использование async/await позволяет подгружать данные перед рендером.
  • next() передаёт управление следующему обработчику маршрута.

Итоговая структура SPA на Page.js

  1. Подключение библиотеки через npm или CDN.
  2. Определение маршрутов (page(path, handler)).
  3. Использование динамических параметров (:param).
  4. Работа с query-параметрами (ctx.querystring).
  5. Middleware для контроля доступа и логики.
  6. Перехват ссылок и программная навигация (page.show(), page.redirect()).
  7. Обработка ошибок и неизвестных маршрутов ('*').
  8. Асинхронная загрузка данных перед рендером.

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

Оглавление