onpopstate不能写在<body>标签上，因为它不是HTML属性而是window对象的事件处理属性，内联写法会被忽略；必须用window.addEventListener或window.onpopstate注册，且需手动处理首屏渲染、event.state判空、pushState后同步更新视图，并配置服务端fallback。
onpopstate 不能写在 <body> 标签上——它不是 HTML 属性，而是 window 对象的事件处理属性，直接写在标签里无效，也不会触发。
为什么onpopstate不能用作<body onpopstate="...">
浏览器不支持将 onpopstate 作为内联 HTML 属性绑定。它只存在于 JavaScript 的 window 对象上，属于“全局事件处理器”，类似 onload 或 onerror，但不像它们那样被 HTML 解析器识别。写在 <body> 上会被忽略，控制台也无报错，容易误以为“没生效”是逻辑问题，其实是根本没注册。
- 错误写法：
<body onpopstate="handleRoute()">→ 完全不执行 - 正确注册方式只有两种：
window.addEventListener('popstate', handler)或window.onpopstate = handler -
window.onpopstate是可赋值属性，但只能设一次；多次赋值会覆盖前一个，不利于模块化维护
popstate事件本身不触发首屏渲染，必须手动补一次
用户首次访问 /dashboard 或刷新页面时，popstate 事件压根不会触发——因为此时没有“历史栈变化”，只是初始加载。如果你只依赖监听事件，首屏永远显示默认内容，URL 和视图严重脱节。
- 必须在脚本初始化阶段主动读取
location.pathname（或location.search），调用一次路由匹配逻辑 - 推荐封装为
matchRoute()函数，在DOMContentLoaded后立即执行 -
event.state可能为null（比如直接输入 URL 后首次进入），代码中需做if (event.state?.tabId)这类防御性判断
pushState 后必须同步更新视图，不能等 popstate
pushState() 只改地址栏和历史栈，不触发任何渲染。常见错误是点击菜单后只调了 history.pushState(..., '/settings')，却忘了紧接着执行 renderSettings()，结果 URL 变了、DOM 还是旧的。
立即学习“前端免费学习笔记（深入）”；
- 每次调用
pushState()后，应立刻执行对应视图更新（如替换<main>内容、激活标签页 class） - 把“推 URL + 渲染”打包成一个函数，比如
navigate('/settings')，避免漏步骤 - 不要在
popstate回调里再调一次pushState()，否则可能无限循环或历史栈膨胀 - 若使用
replaceState()（如修正查询参数），同样要同步更新视图，它也不触发popstate
最常被绕开又最关键的一环：服务端没配 fallback。前端一切正常，但用户刷新 /profile 就 404——因为请求真发到了服务器，而 Nginx/Express 根本不知道该返回 index.html 让前端接管。这个环节不在 JS 范畴，却决定整个路由是否真正可用。
