Атрибут hx-push-url

Атрибут hx-push-url позволяет добавлять URL в историю текущей сессии браузера. Это создает новую запись в истории, позволяя навигацию с помощью кнопок «Назад» и «Вперёд» браузера. htmx сохраняет снимок текущего DOM в своем кэше истории, восстанавливая его из этого кэша при навигации.

Возможные значения этого атрибута:

1. true — добавляет полученный URL в историю.
2. false — отключает добавление полученного URL, если он в противном случае был бы добавлен из-за наследования или hx-boost.
3. URL, который будет добавлен в адресную строку. Это может быть относительный или абсолютный URL, в соответствии с history.pushState().

Вот пример:

<div hx-get="/account" hx-push-url="true">
  Перейти в мою учётку
</div>

Это приведет к тому, что htmx сохранит текущий DOM в localStorage и добавит URL /account в адресную строку браузера.

Вот ещё один пример:

<div hx-get="/account" hx-push-url="/account/home">
  Перейти в мою учётку
</div>

Это добавит URL /account/home в историю текущей сессии.

Примечания

• hx-push-url наследуется и может быть размещён на родительском элементе.
• Заголовок ответа HX-Push-Url имеет аналогичное поведение и может переопределить этот атрибут.
• Атрибут hx-history-elt позволяет указать, какой элемент сохраняется в кэше истории.