Htmx

Question

根据 Htmx 文档 hx-push-url：

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.

这会导致之前的页面只是 恢复而不是重新加载 如果我删除 hx-push-url，导航与用户的期望不符。几乎我所有的页面导航都使用 Htmx，有时我希望页面在返回时重新加载。有没有办法用 Htmx 实现这一点？还是我滥用了 Htmx？

Answer 1

HTMX 尚未提供防止此行为的正式方法。然而，通过一些手动工作，我们可以强制 HTMX 刷新整个页面。 HTMX 将页面存储在 htmx-history-cache 键下的 localStorage 中。所以我们可以利用htmx:pushedIntoHistory事件（~该页面已经保存到历史）来彻底删除这个key，强制HTMX向服务器发起新的请求。

<script>
document.body.addEventListener('htmx:pushedIntoHistory', (evt) => {
  localStorage.removeItem('htmx-history-cache')
})
</script>

但是，默认情况下 HTMX 会发出 AJAX 请求，而不是重新加载整个页面。要强制完全重新加载，我们还需要将 refreshOnHistoryMiss 设置为 true:

<meta name="htmx-config" content='{"refreshOnHistoryMiss":"true"}' />

Htmx - 禁止使用 hx-push-url=true 保存 DOM 的快照

Htmx - Disable saving snapshot of the DOM with hx-push-url=true

browser-history