最近做项目需要用到列表页进入到详情页后，返回来要记住列表滑动的位置。
在这里进行一个自我总结，以便日后使用：
1.router-view keepalive
2.点击详情页时获取并存储页面滑动位置scrollTop
3.返回列表页时赋值scrollTop
一、 关于 keepalive
keepalive 这部分可以看官方文档
需要注意的一点是当页面被设置为keepalive，它的生命周期钩子函数会改变
activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
一、 获取并存储页面滑动位置scrollTop
<!-- html -->
<!-- 将滑动的盒子设置ref-->
<div class="wrapper" ref="wrapperBox" >
</div>
<script>
mounted(){
//获取滑动长度
let box = this.$refs.wrapperBox
box.addEventListener('scroll', () => {
let top = this.$refs.wrapperBox.scrollTop
console.log(top);
this.scTop = top
},false)
},
deactivated () {
//当页面被缓存且离开这个页面时候触发 把查询的高度保存到本地
window.localStorage.setItem('indexscTop', this.scTop);
},
</script>
三、 返回列表页时赋值scrollTop
activated(){
this.$refs.deviceListsBox.scrollTop=window.localStorage.getItem('indexscTop');
},
