监听 popstate 事件是 SPA 中同步浏览器前进/后退状态的唯一可靠方式，需配合 pushState/repaceState 主动维护 state，涵盖菜单 ID、页码、tab 索引等全部可变状态，且在 popstate 回调中延迟还原 DOM 并重设 title。
监听 popstate 事件是唯一可靠方式
SPA 场景下，浏览器原生前进/后退不会触发 hashchange（除非 URL 含 #），必须用 popstate。它在 history 栈变化时触发，且只对 pushState 或 replaceState 操作过的记录生效——直接输入地址或刷新页面不会触发。
常见错误是只监听 hashchange，结果后退时 title、tab、表格页码全没同步，因为现代 layui 管理后台基本都走 history.pushState 管理路由。
-
popstate回调参数event.state是你当初传入pushState(state, title, url)的第一个参数，务必提前存好关键状态（如当前菜单 ID、页码、tab 索引） - 不要在回调里直接调
table.reload()或element.tabChange()—— 此时 DOM 可能还没渲染完，容易报错或失效 - 建议搭配
setTimeout(..., 0)或requestAnimationFrame延迟执行状态还原逻辑
菜单点击后必须手动 pushState，否则 popstate 无响应
很多项目只改了 location.hash 或直接跳转 URL，导致历史栈没更新，popstate 完全不触发。Layui 菜单点击后，得显式调用 history.pushState() 记录状态。
- 菜单项绑定 click 时，在处理完自身逻辑（如高亮、加载内容）后，立刻执行：
history.pushState({menuId: 'user', page: 1}, '', '/user'); - title 参数目前多数浏览器忽略，但 state 对象必须传，它是
popstate里唯一可用的数据源 - 别漏掉第三参数 URL：它决定地址栏显示，也影响后续
back()的目标；若用相对路径，确保和当前 base 一致，否则可能跳到 404 - 如果用了
layer.tab，记得把 tab 索引也塞进 state，比如{menuId: 'log', tabIndex: 2}
title 同步最容易被忽略的时机点
菜单点击后设一次 document.title 不够——当用户后退到上一页时，浏览器会按 URL 自动恢复历史 title，而不是你上次设置的值。所以 popstate 里必须重设 title。
- 别只在菜单 click 里写
document.title = '用户管理'，那只是单向操作 - 在
popstate回调中，从event.state提取菜单 ID，查表映射出对应 title：document.title = menuTitleMap[event.state.menuId] || '后台系统'; - 如果用了
layui.util.fixbar或其他依赖滚动的组件，注意popstate触发时页面可能还没完成 layout，title 设早了会被浏览器覆盖；可加个once标志防重复
表格分页、Tab 切换状态需主动存入 state
popstate 本身不保存表格当前页或 tab 当前索引，这些必须由你手动维护。否则后退时表格回到第 1 页、tab 回到第一个，体验断裂。
- 监听
table.on('page(filter)')时，拿到obj.curr和obj.limit，连同菜单 ID 一起存进history.pushState() - 监听
element.on('tab(filter)')时，同样把data.index写入 state，并在popstate中调用element.tabChange('filter', index) - 避免在
popstate里重复请求数据：先比对event.state和当前状态，仅当不一致时才 reload；否则直接改 UI - 注意：
table.reload()默认会重置页码为 1，若要保持原页码，得传{where: {page: curr}}并在服务端分页逻辑里识别该参数
真正难的不是监听事件，而是把所有可变状态（菜单、tab、分页、搜索条件、折叠展开）都统一收敛到 history.state 里，并确保每次变更都原子化 push。漏掉任意一项，后退时就会出现“状态漂移”——看着 URL 对，但页面内容不对。
