Запуск роутера

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

<!-- Подключение через CDN -->
<script src="https://unpkg.com/page/page.js"></script>
# Установка через npm
npm install page

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

Инициализация роутера выполняется вызовом функции page() без аргументов:

page();

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

Определение маршрутов

Маршруты определяются с помощью функции page(path, callback). Здесь path — строка маршрута, а callback — функция, вызываемая при совпадении URL.

Примеры базовых маршрутов:

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

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

Маршрут может содержать параметры, которые передаются в объект ctx (контекст):

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

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

  • ctx.path — полный путь запроса.
  • ctx.params — объект с параметрами маршрута.
  • ctx.querystring — строка запроса после ?.
  • ctx.title и ctx.state могут быть использованы для управления заголовком страницы и состоянием приложения.

Передача параметров и wildcard-маршруты

Page.js поддерживает динамические сегменты и wildcard-пути.

Динамический сегмент:

page('/post/:postId', ctx => {
  console.log(ctx.params.postId);
});

Wildcard-маршрут:

page('/files/*', ctx => {
  console.log(ctx.params[0]); // Всё, что идёт после /files/
});

Опциональные сегменты:

page('/user/:id?', ctx => {
  console.log(ctx.params.id || 'Нет ID');
});

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

Middleware и цепочки обработчиков

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

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

page('/dashboard', auth, ctx => {
  console.log('Доступ к панели управления разрешён');
});

Пояснение работы middleware:

  • Каждый middleware получает ctx и функцию next.
  • Вызов next() передаёт управление следующему обработчику.
  • Если next() не вызывается, последующие обработчики маршрута не выполняются.

Также можно создавать глобальные middleware, которые будут срабатывать на всех маршрутах:

page('*', ctx => {
  console.log('Каждый переход:', ctx.path);
});

Перенаправления и программная навигация

Для изменения маршрута без перезагрузки используется метод page.show(path):

page.show('/about');

Для постоянного перенаправления можно использовать page.redirect(path):

page('/old-path', () => {
  page.redirect('/new-path');
});

Разница между show и redirect:

  • page.show() добавляет запись в историю браузера.
  • page.redirect() заменяет текущую запись истории и не позволяет вернуться назад через кнопку “Назад”.

Настройка базового пути

Если приложение находится не в корневой директории, можно задать базовый путь с помощью page.base(path):

page.base('/app');
page('/home', () => {
  console.log('Маршрут /app/home');
});

Это позволяет корректно обрабатывать маршруты при деплое на поддиректории.

Включение HTML5 History API и Hash-маршрутов

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

page({ hashbang: true });

Пример хэш-маршрута:

page('/#about', () => {
  console.log('Страница "О нас" через хэш');
});

Это полезно, если сервер не поддерживает обработку всех маршрутов на стороне клиента.

Асинхронная загрузка данных

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

page('/posts/:id', async ctx => {
  const response = await fetch(`/api/posts/${ctx.params.id}`);
  const post = await response.json();
  renderPost(post);
});

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

  • Middleware и обработчики могут быть async.
  • Page.js корректно ожидает завершения промисов внутри обработчика.
  • При ошибке запроса можно перенаправлять пользователя на страницу ошибки через page.redirect('/error').

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

Чтобы обрабатывать маршруты, которые не совпали ни с одним определённым путем, используется wildcard *:

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

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

Практические советы по запуску роутера

  • Вызывать page() после определения всех маршрутов.
  • Использовать middleware для авторизации и глобальной логики.
  • Для приложений с динамическим контентом предпочтительна асинхронная загрузка данных.
  • Для SPA с поддиректориями корректно настраивать базовый путь через page.base().
  • При необходимости поддержки старых браузеров включать hashbang.

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

Оглавление