vue之页面跳转滑动状态保存的实现

有这样的一个需求，在移动端H5的A页面滑动到某个位置时，这个时候跳转到B页面，在B页面进行返回到A页面，需要返回到上次A页面浏览的位置，这个需求相信很多小伙伴都遇到过，话不多说，上逻辑

分析一下实现逻辑

1.使用keep-alive进行页面缓存，关于keep-alive的介绍看一下Vue官方文档

2.在需要进行实现滑动状态保存的组件，对应滑动部分使用@scroll的方法获取当前页面滑动的距离

3.定义变量获取当前的距离$event.target.scrollTop

4.在当前组件使用activated生命周期钩子函数，为滑动模块指定滑动距离

注意：activated只能在keep-alive被激活才能使用

接下来就上代码

1.keep-alive，给需要进行缓存的组件进行缓存

keep-alive的设置

2.给需要实现滑动状态保存的组件，在对应的部分添加ref的属性，和scroll的事件

scroll事件

3.在该组件添加activated生命周期钩子函数，当前我们先要定义记录当前页面滑动位置的变量

关键代码

好了，结束，相信到这里，这个需要就可以完美的解决了！！！

欢迎留言，交流。。。