Метод page.show()

Метод page.show() в библиотеке Page.js используется для программного перехода на определённый маршрут без необходимости взаимодействия с элементами DOM, такими как ссылки. Этот метод позволяет инициировать навигацию программно, передав URL или путь маршрута, зарегистрированный ранее через page(path, callback).

page('/about', () => {
  console.log('Переход на страницу "О нас"');
});

page.show('/about'); // Программный переход на /about

При вызове page.show() выполняются все middleware и callback-функции, зарегистрированные для данного маршрута. Метод принимает следующие параметры:

  • path (обязательный) — строка, указывающая путь, на который нужно перейти.
  • state (необязательный) — объект состояния, который будет добавлен в историю браузера.
  • dispatch (необязательный, по умолчанию true) — логическое значение, определяющее, должен ли Page.js вызывать обработчики маршрута.
  • replace (необязательный, по умолчанию false) — определяет, будет ли текущая запись истории заменена или создана новая.

Пример с использованием всех параметров:

page.show('/contact', { from: 'home' }, true, true);

В этом примере:

  • Переход осуществляется на /contact.
  • В объект state добавляется свойство from: 'home'.
  • dispatch: true означает, что будут вызваны все middleware и маршруты.
  • replace: true заменяет текущую запись в истории, не создавая новую.

Отличие page.show() от page()

Метод page() обычно используется для регистрации маршрутов или инициирования маршрута вручную. В отличие от него, page.show() специально предназначен для программной навигации, сохраняя контроль над историей браузера и возможностью отключить вызов middleware через параметр dispatch.

page('/profile', () => {
  console.log('Страница профиля');
});

page.show('/profile', null, false); // Переход без вызова обработчиков

Здесь переход происходит, но callback-функции маршрута не вызываются, что полезно при изменении URL без рендеринга нового контента.

Работа с объектом состояния

Передача состояния через метод page.show() позволяет сохранять дополнительные данные в истории браузера, аналогично history.pushState. Эти данные можно получить через ctx.state в middleware:

page('/dashboard', ctx => {
  console.log(ctx.state.user); // Выведет 'admin'
});

page.show('/dashboard', { user: 'admin' });

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

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

Параметр replace контролирует, будет ли текущая запись истории заменена или создана новая:

page.show('/settings', null, true, true); // Заменяет текущий URL в истории
page.show('/settings', null, true, false); // Добавляет новый URL в историю

Использование replace: true особенно полезно для редиректов или переходов после успешного выполнения действий, когда не требуется, чтобы пользователь возвращался на предыдущий URL через кнопку “назад”.

Взаимодействие с middleware

Все middleware, зарегистрированные через page('*', callback), автоматически вызываются при переходе через page.show(), если параметр dispatch установлен в true.

Пример глобального middleware:

page('*', ctx => {
  console.log('Middleware сработал для', ctx.path);
});

page('/blog', () => console.log('Страница блога'));
page.show('/blog'); // В консоли сначала middleware, потом 'Страница блога'

Если dispatch: false, middleware и маршрут не вызываются, но URL обновляется.

Асинхронные маршруты и page.show()

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

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

page.show('/posts/42'); // Асинхронный рендер

page.show() корректно инициирует выполнение асинхронных маршрутов и ждёт завершения промисов внутри middleware.

Советы по использованию

  • Использовать page.show() для программного навигирования при действиях, инициированных скриптами, например, после отправки формы.
  • Передавать состояние через параметр state для передачи данных между маршрутами.
  • Применять replace: true для редиректов, чтобы не засорять историю переходов.
  • Управлять вызовом middleware через dispatch, если требуется изменение URL без перерендеринга.

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

Оглавление