Vue中滚动条位置恢复需手动实现：子组件在离开前emit保存位置，父组件按路由路径缓存，进入时通过nextTick还原；虚拟滚动需调用对应API而非直接操作DOM。
Vue 中实现滚动条位置恢复的事件通知，核心是通过自定义事件（$emit）把滚动位置“传出去”，再由父组件监听并主动还原。这不是 Vue 内置功能，需要手动记录 + 触发 + 恢复。
记录滚动位置并触发自定义事件
在子组件中，当页面/容器即将离开（比如路由切换前、tab 切换前、或组件 beforeUnmount 时），获取当前滚动位置，并用 $emit 通知父组件：
- 监听容器的
scroll事件（可选，用于实时更新，非必须） - 在合适的时机（如
onBeforeUnmount或beforeRouteLeave）调用element.scrollTop/scrollLeft - 通过
this.$emit('save-scroll', { top: y, left: x })（Options API）或emit('save-scroll', { top, left })（Composition API）发出事件
父组件监听并缓存滚动位置
父组件通过 @save-scroll 接收位置信息，并按需存储（例如用 ref、reactive 对象，或配合路由 fullPath 做 key 缓存）：
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
- 推荐以路由路径（
$route.fullPath）或唯一 ID 为 key，保存对应滚动值 - 例如：
scrollCache[currentPath] = { top: 120, left: 0 } - 避免直接覆盖，可加防抖或仅在有效滚动后才保存
进入时还原滚动位置
当组件重新挂载或路由激活时（如 onMounted、activated 钩子，或 watch($route)），读取缓存的位置并设置：
立即学习“前端免费学习笔记（深入）”；
- 确保 DOM 已渲染完成（可用
nextTick()） - 对目标容器（如
ref="scrollContainer"）执行el.scrollTop = cached.top - 若使用
keep-alive，优先用activated钩子还原；否则用onMounted+ 路由监听
补充：兼容原生滚动与虚拟滚动场景
普通列表用 scrollTop 即可；若用了虚拟滚动（如 vue-virtual-scroller），需调用其提供的 API（如 scrollToIndex()）而非直接操作 DOM：
- 自定义事件仍可统一为
save-scroll，但 payload 可能是{ index: 42 }而非像素值 - 父组件需根据组件类型决定还原方式，保持事件语义一致即可
