hx-push-url

hx-push-url 属性を使用すると、URL をブラウザーの ロケーション履歴 にプッシュできます。これにより新しい履歴エントリが作成され、ブラウザーの戻るボタンと進むボタンによるナビゲーションが可能になります。htmx は現在の DOM をスナップショットして履歴キャッシュに保存し、ナビゲーション時にこのキャッシュから復元します。

この属性の可能な値は次のとおりです。

1. true、取得した URL を履歴にプッシュします。
2. false、継承または hx-boost によって URL がプッシュされる場合にプッシュされる URL を無効にします。
3. history.pushState() どおりに URL をロケーションバーにプッシュします。これは相対パスまたは絶対パスのどちらでもかまいません。

例を次に示します。

<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 属性 を使用すると、履歴キャッシュに保存される要素を変更できます。