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) {
            return savedPosition
        } else {
            return {
                x: 0,
                y: 0
            }
        }
    }
});

注意：该功能只能在history的路由模式下有效，对于某些页面操作可能会影响上一个页面的展示，那么上一个页面就不应该做滚动处理，这个时候就可以根据路由的来源和去向来判断是否需要滚动了。

 

转载于:https://www.cnblogs.com/xyyt/p/8663701.html