如何使用HTMX实现无刷新加载的HTML页面导航

你提到的需求完全可以实现，这是HTMX最典型的基础应用场景，无需复杂开发即可完成。

具体实现步骤 #

• 前置准备：先确保你已在页面中引入HTMX的JS资源文件，无需额外其他依赖。
• 确认当前页面的内容容器：给你需要替换内容的公共区域设置唯一ID，例如全局主内容区设置ID为main-content，所有页面的主体内容都放在该容器内。
• 修改「联系我们」链接的配置，参考代码如下：

<a 
  href="/sample/contact"
  hx-get="/sample/contact"
  hx-target="#main-content"
  hx-push-url="true"
>
联系我们
</a>

核心参数说明 #

• hx-get：指定点击链接时，发送GET请求到联系页对应的后端地址
• hx-target：指定请求返回的内容，直接替换ID为main-content的容器内容，不会触发整页刷新
• hx-push-url="true"：点击后会自动将浏览器地址栏更新为http://localhost/sample/contact，符合普通跳转的用户使用习惯，用户手动刷新页面时也能正常加载完整的联系页
• 如果你后端的/sample/contact接口返回的是完整HTML页面（包含导航、页脚等公共部分），可以额外在链接上添加hx-select="#main-content"参数，HTMX会自动提取返回内容里ID为main-content的部分做替换，不需要修改后端逻辑。

可选扩展配置 #

如果需要添加加载状态提示，可以在页面中添加加载指示器：

<div id="loading-tip" class="htmx-indicator" style="display: none;">内容加载中...</div>

再在联系链接上添加hx-indicator="#loading-tip"参数，请求过程中会自动显示加载提示，请求完成后自动隐藏。

内容的提问来源于stack exchange，提问作者Ahmed Sharif Khan