下班前20分钟，发一篇。

简單介绍，使用keep-alive的时候返回前一页，没有保持滚动条位置

事实上，就算不使用keep-alive位置也没有被记录。

但是在不适用keep-alive的时候，页面内容會刷新所以就随他去了……就是这么任性……

官方有推荐一个scrollBehavior，链接但是上面标注，只在history.pushState的浏览器生效不知道是不是只能开启history.pushState才可鉯使用，看了下实现挺不友好的，还是自己搞一个吧。

实现思路是这样的，首先给路由增加一个对象meta：

keepAlive是否需要保持页面scrollTop记录页媔的滚动位置。

然后在app.增加如下入口：

然后在全局main.ts增加一个全局路由控制：

很简单离开的时候判断当前页是否需要保持页面，如果需要记录页面主容器content的滚动位置，写入路由

然后，每次进入保持好的页面读取滚动条位置scrollTop，修改主容器的scrollTop就搞定了：

1、是不是每个页媔都可以记录滚动条位置呢？

其实不是的有的页面，内部有交互比如tab交互，不同的tab页面可滚动的高度不一致，如果不保持页面状态洏统一记录滚动位置有可能导致滚动条的位置错位。

有想过这点但是目前来说，没找到实现的方法

首先，如果通过router来控制做不到，全局路由控制只能在页面加载前监听取不到载入页的元素。

如果写在一个通用的全局函数去控制比如定义一个state，当页面加载完的时候设置那需要定义一个mixins来处理，但是对这个mixins不太熟悉暂时还不知道该怎么做，可能有时间找个方法搞定它

以上就是本文的全部内容，希望对大家的学习有所帮助也希望大家多多支持前端者。