路由监听器感知前进后退的根本原因是响应popstate事件，该事件由浏览器在历史栈指针移动完成后自动触发，前提是历史项state非null；仅靠popstate无法判断导航方向，故需配合内存中维护的本地历史栈模拟。
路由监听器能感知浏览器前进后退，根本原因不是它“监听按钮”，而是它响应了浏览器历史栈（session history）的变更事件——popstate。这个事件由浏览器内核在用户点击前进/后退、调用 history.back()/history.forward() 或 history.go() 时自动触发，前提是历史记录中存在带非 null state 的条目。
浏览器原生 history 栈如何工作
每次调用 history.pushState(state, title, url)，浏览器就在当前会话历史栈中追加一条新记录；replaceState 则替换栈顶项。这些操作不刷新页面，但会真实修改历史栈结构和长度（history.length）。当用户点击前进/后退按钮时，浏览器内部移动指针到对应历史项，并在跳转完成后同步触发 popstate 事件，携带该历史项的 state 对象。
关键点：
- popstate 不是“监听按钮”，而是监听历史栈指针移动完成这一结果；
- 首次加载页面（initial navigation）不会触发 popstate；
- 仅当历史项的 state 是对象（非
null或undefined）时，后续回退/前进才保证触发该事件； - 浏览器不暴露历史栈内容（如不能读取
history[0]），只通过event.state返回当前项的 state。
为什么单纯监听 popstate 不够？需要“模拟栈”
popstate 事件本身只告诉你“现在到了哪”，不告诉你“是从哪来的”或“往哪去”。比如你从 A → B → C，再后退到 B，event.state 只含 B 的 state，无法判断是刚从 C 回来，还是从其他路径跳转而来。
因此，主流路由库（Vue Router、React Router、Wouter）都做了两件事：
- 在每次导航前，用
pushState或replaceState主动写入带唯一标识（如时间戳、随机 ID、路由路径哈希）的 state； - 在内存中维护一份与浏览器历史栈逻辑对齐的本地数组（例如
localHistory = [{id: 'a1', path: '/home', time: 1715259240000}, ...]），并在 popstate 触发时，用 event.state.id 或 time 去匹配本地数组，推导出方向（前进/后退）和上一位置。
源码级栈模拟示例（简化版）
以下是一个轻量模拟的核心逻辑，不依赖框架：
let localHistory = [];
let currentIndex = -1;
function pushToHistory(state, url) {
// 清空当前索引之后的所有记录（类似浏览器行为）
localHistory = localHistory.slice(0, currentIndex + 1);
// 添加新记录
const entry = { ...state, id: Date.now(), url };
localHistory.push(entry);
currentIndex++;
history.pushState(entry, '', url);
}
function handlePopState(event) {
const { state } = event;
if (!state) return;
const targetIndex = localHistory.findIndex(e => e.id === state.id);
if (targetIndex === -1) return;
if (targetIndex > currentIndex) {
// 前进：指针右移
console.log('forward');
} else if (targetIndex
<p>这个 localHistory 就是源码级的“栈模拟”——它不复制浏览器内部结构，而是用可读、可比对的数据结构补足 popstate 缺失的方向与上下文信息。</p>
<h3>框架如何封装得更可靠</h3>
<p>以 Vue Router 为例，它在初始化时就用 <code>history.replaceState</code> 注入初始 state，并为每次 <code>router.push</code> 自动调用 <code>pushState</code>；同时将路由元信息（<code>to</code>, <code>from</code>, 导航守卫状态）存入 state 对象。其内部还处理了：</p>
- 异步导航未完成时 popstate 的暂挂与重放；
- hashchange 与 popstate 的优先级协调；
- 服务端渲染（SSR）场景下 history.state 的预填充；
- 内存泄漏防护（组件卸载时自动清理监听器）。
这些不是 magic，而是围绕原生 history API 构建的一层确定性、可观测、可调试的状态同步机制。
