闭包不直接保存历史状态，而是通过封装路由配置、状态变量和处理逻辑，配合History API实现安全可控的路由管理。
JavaScript 中闭包本身不直接保存历史状态，但它可以配合 history.pushState、history.replaceState 和 popstate 事件，封装路由状态管理逻辑，让状态维护更安全、作用域更清晰——关键在于用闭包保护当前路由状态、回调函数和中间件，避免全局污染和意外覆盖。
用闭包封装路由状态与处理逻辑
把当前路径、匹配规则、渲染函数、前置守卫等私有数据和方法封装在闭包内，外部无法直接修改，但可通过返回的 API 操作：
function createRouter(routes) {
let currentState = null;
function navigate(path) {
const matched = routes.find(r => new RegExp('^' + r.path + '$').test(path));
if (matched) {
currentState = { path, ...matched };
history.pushState(currentState, '', path);
matched.render();
}
}
function handlePopState(event) {
currentState = event.state;
if (currentState && currentState.render) {
currentState.render();
}
}
// 初始化监听
window.addEventListener('popstate', handlePopState);
// 返回受控 API，外部只能调用，不能篡改内部 state
return {
navigate,
getCurrentState: () => ({ ...currentState }), // 返回副本，防误改
go: (delta) => history.go(delta)
};
}
// 使用
const router = createRouter([
{ path: '/', render: () => console.log('首页') },
{ path: '/user/\d+', render: () => console.log('用户页') }
]);
router.navigate('/user/123'); // 触发 pushState 并渲染
闭包保存路由中间件链与上下文
在实现 beforeEach、afterEach 等钩子时，用闭包维持中间件数组和执行上下文，确保每个路由实例独立运行：
function createRouterWithGuard(routes) {
const beforeGuards = [];
const afterGuards = [];
function beforeEach(fn) {
beforeGuards.push(fn);
}
function afterEach(fn) {
afterGuards.push(fn);
}
async function transition(to, from) {
for (const guard of beforeGuards) {
const result = await guard(to, from);
if (result === false || result instanceof Error) return;
}
// 执行跳转与渲染...
const matched = routes.find(r => new RegExp(r.path).test(to.path));
if (matched) {
history.replaceState({ ...to, matched }, '', to.path);
await matched.render();
}
for (const guard of afterGuards) {
await guard(to, from);
}
}
return { beforeEach, afterEach, transition };
}
闭包 + state 对象持久化关键参数
调用 pushState(state, title, url) 时，state 对象会被序列化进浏览器历史栈。用闭包预先构造结构化 state，并绑定还原逻辑：
立即学习“Java免费学习笔记（深入）”；
- state 不应只存字符串路径，而应包含组件名、查询参数、滚动位置、表单草稿等可恢复字段
- 闭包内维护一个
stateMapper函数，统一将 URL 解析为标准 state 格式，避免各处重复解析 - 在
popstate回调中，闭包可访问私有映射表或缓存，快速还原页面状态（如自动滚动到上次位置）
注意：闭包不是替代 history API，而是增强其封装性
真正保存历史状态的是浏览器的 History API（pushState/replaceState），闭包的作用是：
- 隔离路由配置、状态变量和副作用逻辑，防止多路由实例互相干扰
- 让
state对象的生成、校验、还原逻辑集中可控 - 在 SPA 路由切换中，避免全局变量
currentRoute被异步操作意外覆盖
