SPA 首页
这是一个单页面应用演示。点击上方导航链接,页面不会刷新,只有内容区域会交换。
核心特性
- 无刷新导航 — 点击链接后页面不刷新
- URL 变更 — 浏览器地址栏实时更新
- 前进/后退 — 浏览器历史记录正常工作
- 滚动记忆 — 回退时恢复之前的滚动位置
- 标题更新 — 每个页面的 title 自动同步
- 渐进增强 — 禁用 JS 后链接照常跳转
表单测试(GET)
表单提交也会走 SPA 导航(GET 序列化到 URL,POST 通过 fetch)。
锚点测试
向下滚动后点击导航到其他页面,再点浏览器后退,滚动位置会被恢复。
滚动区域(用于测试滚动记忆)
HTMX 集成
SPA 导航后的新内容会自动调用 htmx.process(),所以其他 HTMX 扩展照常工作: