Vue Composition API 怎么管理页面滚动条位置的记忆与恢复-Vue.js-PHP中文网

vue composition api 通过 usescroll 函数实现滚动位置记忆，核心为「离开时存、进入时取、dom就绪后设」，结合响应式引用、生命周期钩子与 dom 引用，支持 keep-alive、刷新恢复、路由返回等场景。

vue composition api 怎么管理页面滚动条位置的记忆与恢复

Vue Composition API 管理滚动位置记忆，核心是「离开时存、进入时取、DOM就绪后设」。它不依赖全局状态或第三方库，而是通过响应式引用 + 生命周期钩子 + DOM 引用精准控制，适配 keep-alive 缓存页、刷新恢复、路由返回等多种场景。

封装一个可复用的 useScroll 函数，接收滚动容器的 ref，自动处理保存与恢复逻辑：

在 onBeforeRouteLeave 中读取并持久化（如 sessionStorage）当前 scrollTop
在 onActivated（keep-alive 场景）或 onMounted（首次加载/刷新场景）中读取存储值，并用 nextTick 确保 DOM 渲染完成后再赋值
支持传入自定义 key，避免不同页面滚动位置互相覆盖

不是所有滚动位置都要写进 localStorage：

Vue 3 组合式 API 与

热门下载

网站特效

网站源码

网站素材

前端模板