使用window.history.pushstate可实现无刷新翻页：通过更新url并存入页码状态，配合popstate监听还原页面；需同步处理点击翻页、浏览器前进/后退及首次加载时的url参数解析，形成三段闭环，避免刷新断层。
用 window.history.pushState 实现无刷新翻页
直接改 location.href 会整页重载，体验断层。真正可用的前后翻页必须依赖浏览器历史栈管理，核心是 pushState + popstate 配合。
关键点在于：每次翻页不刷新页面，只更新 URL 和页面内容；用户点浏览器「后退」「前进」时，要能还原对应状态。
- 调用
pushState({page: 2}, "", "?page=2")更新地址栏且不刷新，同时把当前页码存进 state 对象 - 监听
popstate事件，从event.state.page拿到目标页码，再加载对应数据并渲染 - 首次进入页面时（比如直接访问
index.html?page=3），需在DOMContentLoaded里解析 URL 参数，主动初始化第 3 页内容 - 注意：
pushState第二个参数（title）在现代浏览器中被忽略，传空字符串即可
翻页按钮怎么绑定逻辑？别漏掉初始状态处理
很多人写了 nextBtn.addEventListener("click", ...) 就以为完事了，结果用户刷新页面后回到第 1 页——因为没处理 URL 参数的初始读取。
真实流程是三段闭环：
- 点击「下一页」：计算新页码 → 调用
pushState更新 URL → 发起 AJAX 加载新数据 → 替换页面主体内容（如document.getElementById("content").innerHTML = ...） - 点击「上一页」：同理，但页码减一；若已到第 1 页，禁用按钮或忽略操作
- 页面加载时：用
new URL(window.location).searchParams.get("page")取参数，若为有效数字则立即加载该页，否则默认加载第 1 页
漏掉第三步，用户分享链接或刷新后就丢失上下文。
服务端要不要配合？静态 HTML 下的折中方案
如果 index.html 是纯前端静态文件，没有后端 API，那就没法真“分页”——所有数据得提前塞进页面里，比如藏在 <script type="application/json"></script> 中。
这时翻页只是切换本地数据片段：
- 假设你有 5 页内容，全量存在
window.PAGE_DATA = [{...}, {...}, ...] -
pushState后，从PAGE_DATA[page - 1]取数据渲染，不发任何网络请求 - 优势是零部署依赖；缺点是首屏体积大，不适合几百页的场景
- 若数据量大，必须配简单后端接口（哪怕只是返回 JSON 文件），否则用户等不到第 10 页
容易踩的坑：popstate 不触发？URL 格式不对
最常见问题：点了「后退」，URL 变了，但页面没反应——大概率是 pushState 的第三个参数（URL）写错了。
- 不能写成
"?page=2"这种相对路径片段，而应写完整路径如"index.html?page=2"或更推荐的"./?page=2" - 如果用了
history.pushState(..., "./?page=2")，那用户从https://site.com/sub/进来，实际变成https://site.com/sub/?page=2，符合预期 - 避免用哈希路由（
#page=2），虽然它也能用hashchange监听，但语义不清，SEO 和分享都不友好 - 调试时打开浏览器开发者工具的「Network」标签，确认
popstate事件确实触发，并检查event.state是否为null（首次访问时就是 null，需靠 URL 参数兜底）
真正的难点不在代码行数，而在把 URL、state、DOM 渲染、初始加载这四者对齐——少一个环节，翻页就断在某个环节上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
