HTMX中页面刷新时如何重新加载所有局部片段内容？

你目前的实现只完成了点击交互时的内容加载和地址推送，缺少页面初始化时的哈希路由检测逻辑，刷新时浏览器只会返回根路径的初始页面，不会自动触发对应HTMX请求。

• 第一步：优化导航链接的href属性，把原来的href="#"替换为和hx-push-url一致的哈希值，避免HTMX加载失败时点击跳转异常：

<a class="nav-link" href="#/feed" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>

<a class="nav-link" href="#/profile" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>

• 第二步：添加页面初始化和哈希变化的监听逻辑，页面加载或者哈希值变化时，自动匹配触发对应的HTMX请求：

document.addEventListener('DOMContentLoaded', () => {
  // 定义哈希和对应请求的映射关系
  const hashRouteMap = {
    '#/feed': { url: '/api/?action=feed', target: '#app' },
    '#/profile': { url: '/api/?action=profile', target: '#app' }
  }
  // 处理哈希路由的函数
  function handleHashRoute() {
    const currentHash = window.location.hash
    const route = hashRouteMap[currentHash]
    if (route) {
      // 手动触发HTMX请求加载对应内容
      htmx.ajax('GET', route.url, { target: route.target })
    }
  }
  // 页面初始化时执行一次，解决刷新不加载的问题
  handleHashRoute()
  // 监听哈希变化事件，浏览器前进后退时也能正常加载内容
  window.addEventListener('hashchange', handleHashRoute)
})

• 可选优化（如果想改用无哈希的普通路径）：
  1. 把导航的hx-push-url改为/feed、/profile，href也对应改为对应路径
  2. 在服务端添加路由兜底规则，所有/feed、/profile这类前端路由路径都返回你的主HTML页面，不要返回404
  3. 把上面的哈希监听逻辑改为读取window.location.pathname匹配路由即可，这种方案地址栏更简洁，也不会存在哈希路由的SEO问题

内容的提问来源于stack exchange，提问作者Ethan Freeman