单页面应用中路由切换时滚动位置丢失，需用localStorage按路径存储window.scrollY，并在路由进入时读取恢复；初始化须设window.history.scrollRestoration = 'manual'，确保DOM渲染完成后再scrollTo。
单页面应用（SPA）中路由切换时滚动条位置丢失，是因为页面没刷新、DOM 重用但浏览器不自动记住滚动位置。LocalStorage 本身不直接保存滚动位置，但可以配合手动记录和恢复实现“保留滚动条位置”效果。
监听页面滚动并存入 localStorage
在路由切换前（比如监听 beforeEach 或组件卸载前），获取当前滚动位置并存到 localStorage：
- 用
window.scrollY（垂直）或window.scrollX（水平）获取当前位置 - 以路由路径为 key 存储，例如：
localStorage.setItem('/user/profile', String(window.scrollY)) - 推荐在组件
beforeUnmount（Vue）或useEffect cleanup（React）中执行，避免重复保存
路由跳转后恢复滚动位置
进入新路由时（如 mounted、onMounted 或 useEffect），从 localStorage 读取对应路径的值并滚动：
- 先检查是否有缓存值：
const saved = localStorage.getItem(currentPath) - 存在且为有效数字时，调用
window.scrollTo(0, parseInt(saved)) - 注意：首次访问或无缓存时，应保持默认行为（如滚动到顶部），可加判断
if (saved != null) { ... }
处理浏览器原生滚动恢复干扰
现代浏览器（Chrome/Firefox）对 SPA 有默认滚动恢复逻辑（scrollRestoration: 'auto'），可能覆盖你的逻辑：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“Java免费学习笔记（深入）”；
- 在应用初始化时禁用浏览器自动恢复：
window.history.scrollRestoration = 'manual' - 这句只需执行一次，通常放在
main.js或根入口文件最开始 - 否则可能出现“刚恢复又跳回顶部”的冲突现象
清理过期或无效缓存（可选但推荐）
长期运行下 localStorage 可能堆积大量旧路径记录，影响性能和准确性：
- 可在每次保存前清理其他路径缓存（适合简单场景）
- 更稳妥做法：在路由切换时只保留最近 N 条，或按需清理（如用户登出、缓存超时）
- 也可用时间戳标记 + 定期清理，但多数项目只需“按路径精确读写”已足够
不复杂但容易忽略细节：scrollRestoration 设为 manual、路径 key 严格一致（含 query 参数是否包含）、以及确保恢复时机在 DOM 渲染完成之后（可用 nextTick 或 requestAnimationFrame）。
