标签页与路由联动的HTML实现技巧

常见错误是只改了 location.hash 却没监听变化，或者用了 pushState 却忘了处理后退/前进按钮——结果用户点返回，页面卡在旧状态，标签页高亮错位。

• 优先用 history.pushState() 替代哈希，URL 更干净，服务端也容易支持 SSR
• 每次调用 pushState 后，必须同步更新当前标签页的激活状态（比如切换 aria-selected 和 CSS 类）
• 必须监听 popstate 事件，且该事件不触发于初始页面加载，需额外调用一次逻辑来对齐首屏状态

如何让 History API 改变 URL 但不触发服务端请求

关键不在前端，而在服务端配置：所有可能的标签页路径（如 /settings/profile、/settings/notifications）都必须返回同一份 HTML 入口文件。否则用户直接访问或刷新，Nginx 或 Vercel 就会 404。

开发时若用 Vite 或 Webpack Dev Server，需配 historyApiFallback: true；部署到 Nginx，要加 try_files $uri $uri/ /index.html;。漏掉这个，本地跑得好好的，一上线就白屏。

• 前端路由路径必须和服务端可捕获的路径前缀一致，比如约定所有标签页都在 /settings/* 下，就别在代码里写成 /user/settings
• pushState 的第一个参数（state 对象）建议至少包含 tabId 字段，方便 popstate 里快速还原
• 不要在 state 里塞大对象（如 DOM 节点或函数），它会被序列化进浏览器历史栈，有大小限制（通常 640KB）

标签页组件与路由状态如何保持双向同步

所谓“联动”，不是单向响应 URL 变化，而是点击标签页能推新地址，地址栏变化也能反向点亮对应标签。两者状态必须唯一可信源——推荐用一个 currentTab 变量（或 React 的 useState）作为单一数据源。