vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动。当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页面,然后点击浏览器返回按钮的时候,我们是希望能保持之前的滚动位置的。 缓存?解决这个问题,第一时间想到的是缓存keep-alive,但是缓存只是不执行create/mounted生命周期钩子,页面滚动位置是无法保留的,通过缓存的方法无法实现这个效果。 滚动?也有同事提过使用滚动模拟,但是vue是单页面应用框架,整个项目就一个window对象,实现起来也是比较麻烦的,而且效果不一定好。 最后就找到了vue官方提供的进阶功能——滚动行为,通过这个功能,可以自定义路由切换时页面如何滚动。 功能行为 : 使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。 vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。 示例代码: const router = new Router({ mode: "history", routes: routes, scrollBehavior(to, from, savedPosition) { console.log(savedPosition) if(savedPosition) {