最近做项目需要用到列表页进入到详情页后，返回来要记住列表滑动的位置。

在这里进行一个自我总结，以便日后使用：

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');
  },