hx-push-url

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

¥The hx-push-url attribute allows you to push a URL into the browser location history. This creates a new history entry, allowing navigation with the browser’s back and forward buttons. htmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.

此属性的可能值为：

¥The possible values of this attribute are:

  1. true，将获取的 URL 推送到历史记录中。

    ¥true, which pushes the fetched URL into history.

  2. false，如果由于继承或 hx-boost 而需要推送获取的 URL，则禁用推送该 URL。

    ¥false, which disables pushing the fetched URL if it would otherwise be pushed due to inheritance or hx-boost.

  3. 要推送到位置栏的 URL。根据 history.pushState()，这可能是相对的或绝对的。

    ¥A URL to be pushed into the location bar. This may be relative or absolute, as per history.pushState().

这是一个例子：

¥Here is an example:

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

这将导致 htmx 将当前 DOM 快照到 localStorage 并将 URL“/account”推送到浏览器位置栏。

¥This will cause htmx to snapshot the current DOM to localStorage and push the URL `/account’ into the browser location bar.

另一个例子：

¥Another example:

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

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

¥This will push the URL `/account/home’ into the location history.

注释

¥Notes