hx-push-url

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

此属性的可能值为

1. true，它将获取的 URL 推入历史记录。
2. false，它在由于继承或 hx-boost导致获取的 URL 应该被推入时，禁用推送获取的 URL。
3. 要推入地址栏的 URL。它可以是相对 URL 或绝对 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 属性 允许更改在历史记录缓存中保存的元素。