SPA监听浏览器前进/后退本质是响应popstate事件，需同步状态与可控拦截；依赖history.pushState/replaceState触发，通过event.state恢复视图和滚动位置，并结合路由守卫与自定义标记识别导航来源。
SPA 应用监听浏览器前进/后退，本质是响应 popstate 事件，并与前端路由的状态管理深度协同。关键不在“监听动作”，而在“同步状态”和“可控拦截”——Vue Router、React Router 等库的路由钩子（如 beforeEach、useNavigation）封装了底层逻辑，但理解其如何对接浏览器历史堆栈，才能写出健壮的导航逻辑。
用原生 history API 理解底层机制
浏览器前进/后退会触发 window.addEventListener('popstate', handler)，但该事件只响应通过 history.pushState()/replaceState() 改变的 state，不触发页面刷新。SPA 正是靠它驱动视图更新。
- 每次调用
pushState({ key: 'xxx' }, '', '/path')，都会向历史堆栈压入一条带自定义 state 的记录 -
popstate回调中可读取event.state，用于恢复组件状态、滚动位置等 - 注意：
popstate不区分前进/后退，需自行比对当前history.state与上一个 state 的key或时间戳来判断方向
路由守卫中识别导航来源（用户跳转 vs 编程式跳转）
现代路由库的全局前置守卫（如 Vue Router 的 router.beforeEach）提供 to 和 from，但默认不暴露“是否由浏览器按钮触发”。需结合 navigationType 或自定义标记：
- Vue Router 4+：在
to.meta中设置isBackForward: true，并在popstate触发时用router.push({ ...to, replace: true })激活守卫（需配合scrollBehavior处理） - React Router 6.4+：使用
useNavigation()获取navigation.state === 'loading'状态；搭配useBlocker()可拦截后退（例如表单未保存） - 通用技巧：在编程式跳转前临时写入
sessionStorage标记（如navSource: 'programmatic'），守卫中读取后清除，剩余即为浏览器导航
保持滚动行为与组件状态的一致性
用户前进/后退时，期望回到上次离开时的滚动位置和局部状态（如搜索框输入、选项卡激活项）。仅靠路由守卫不够，需组合使用：
- 启用路由内置滚动行为（Vue Router 的
scrollBehavior或 React Router 的useScrollRestoration） - 对长列表或复杂表单，将关键状态存入
history.state（如pushState({ scrollTop: 200, search: 'vue' }, '', '/list')），在popstate中还原 - 避免在组件
mounted或useEffect中无条件重置状态——应先检查history.state是否含有效快照
谨慎使用路由拦截，避免破坏浏览器预期
用 router.beforeEach 或 useBlocker 阻止后退时，要明确场景边界：
- 仅对有未提交变更的页面拦截（如编辑页、多步表单），且必须提供明确提示和取消入口
- 不要拦截纯浏览类页面（如详情页、文章页），否则损害用户体验和可访问性
- 拦截逻辑需异步兼容：Vue Router 中返回
Promse，React Router 中用blocker.proceed()/blocker.reset()显式控制
