hx-push-url

hx-push-url 属性允许你将 URL 推送到浏览器位置历史记录中。这将创建一个新的历史记录条目，允许使用浏览器的后退和前进按钮进行导航。 htmx 当前 DOM 进行快照并将其保存到其历史记录缓存中，并在导航时从此缓存中恢复。

该属性可能的值包括：

1. true，将获取的 URL 推送到历史记录中。
2. false，如果由于 inheritance 或 hx-boost 而推送获取的 URL，则会禁用推送。。
3. 要推送到地址栏的 URL。这可能是相对的，也可以是绝对的，根据 history.pushState（） 而定。

以下是一个例子：

<div hx-get="/account" hx-push-url="true">
  Go to My Account
</div>

这将导致 htmx 对当前 DOM 进行快照且保存至 localStorage ，并将 URL “/account” 推送到浏览器地址栏。

另一个例子：

<div hx-get="/account" hx-push-url="/account/home">
  Go to My Account
</div>

这会将 URL “/account/home” 推送到地址历史记录中。

笔记

• hx-push-url 可以继承并放置在父元素上
• HX-Push-Url 响应头具有类似的行为，并且可以覆盖此属性。
• 该 hx-history-elt 属性允许更改保存在历史缓存中的元素。