在SPA中可用sessionStorage或localStorage记录路由路径实现访问历史追踪，需手动在跳转前调用recordRoute()写入路径数组，支持上一页获取、清空、计数等操作，并可自动集成Vue Router或React Router。
在单页应用（SPA）中，用 localStorage 或 sessionStorage 记录用户访问过的路由路径，是一种轻量、无后端依赖的前端行为追踪方式。它不替代完整路由系统，但适合做访问历史回溯、页面停留分析或简易“最近浏览”功能。
核心思路：监听路由变化并持久化路径
HTML5 的 history.pushState() 和 replaceState() 不会触发 hashchange 或 popstate 事件（除非用户手动点浏览器前进/后退），所以不能只靠 popstate。真正可靠的方式是——在每次主动跳转前，手动将目标路径写入 Storage。
- 适用于基于
history模式的前端路由（如 Vue Router 的history模式、React Router v6+ 的createBrowserRouter） - 不依赖框架时，可封装一个
goTo(path)函数统一处理跳转 + 记录 - 建议使用
sessionStorage记录本次会话路径；若需跨会话保留，改用localStorage并注意清理策略
基础实现：记录路径栈（数组结构）
把访问路径按顺序存为数组，例如 ["/", "/user", "/user/profile"]，便于获取上一页、倒序遍历或限制长度。
function recordRoute(path) {
const key = 'routeHistory';
const history = JSON.parse(sessionStorage.getItem(key) || '[]');
<p>// 避免重复记录连续相同路径（如多次点击同一导航）
if (history.length === 0 || history[history.length - 1] !== path) {
history.push(path);
// 可选：限制最多保存 20 条
if (history.length > 20) history.shift();
sessionStorage.setItem(key, JSON.stringify(history));
}
}</p><p>// 使用示例（在路由跳转逻辑中调用）
recordRoute('/product/123');
增强能力：自动绑定主流路由库
以 Vue Router 为例，在 router.beforeEach 中注入记录逻辑：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
router.beforeEach((to, from, next) => {
recordRoute(to.fullPath);
next();
});
React Router v6+ 可结合 useLocation + useEffect（注意避免重复执行）：
function RouteLogger() {
const location = useLocation();
<p>useEffect(() => {
recordRoute(location.pathname + location.search);
}, [location]);</p><p>return null;
}
// 在根组件中渲染 <RouteLogger />
实用工具方法：读取与操作历史
提供几个常用辅助函数，让记录的数据真正可用：
-
getPreviousRoute()：返回上一个路径（数组倒数第二个） -
clearRouteHistory()：清空记录（如退出登录时调用） -
getRouteCount()：统计本次会话访问多少不同路径 -
isFirstVisit(path)：判断某路径是否首次访问（需配合去重 Set 存储）
例如：
function getPreviousRoute() {
const history = JSON.parse(sessionStorage.getItem('routeHistory') || '[]');
return history.length >= 2 ? history[history.length - 2] : null;
}
不复杂但容易忽略的是路径标准化——带查询参数的路径（/search?q=abc）和不带参数的（/search）应视为不同记录，除非业务明确要忽略参数。按需在 recordRoute() 中对 path 做 new URL(path, location.origin).pathname 处理即可归一化。
