Vue 3 中使用 keep-alive 缓存路由组件,返回时滚动位置丢失怎么办
在后台管理系统里,列表页跳转到详情页再返回时,通常希望列表页的状态(搜索条件、滚动位置)能保留。Vue 3 的 <keep-alive> 可以缓存组件实例,但很多人发现即使加了缓存,返回列表页时滚动条还是回到了顶部。这个现象和浏览器的滚动机制、keep-alive 的激活时机都有关系。<keep-alive> 只负责保持组件实例不被销毁,它不会自动保存 DOM 的滚动位置。当组件被 deactivated 时,其根元素可能被移出文档流或隐藏,浏览器会丢失原有的滚动容器偏移。本文从实际场景出发,说明如何结合 onActivated、onDeactivated 以及 scrollBehavior ...