hx-push-url

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

该属性可能的值包括：

1. true，将获取的 URL 推送到历史记录中。
2. false，如果由于继承或而导致 URL 被推送，则会禁用推送所获取的 URL hx-boost。
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属性允许更改保存在历史缓存中的元素。