vue keep-alive页面位置

Posted 2020-11-19 rrene

从列表中点击某一按钮，进入详情页面，需要记住列表页当前的位置：

　　

　　　1、需要为 想被记住位置的组件设置缓存，如上图，也可以在app.vue中进行全局设置

　　　2、在列表页面添加方法：

　　　　　　mounted () {
  　　　　　　　　document.addEventListener(‘scroll‘,this.handelscroll)
　　　　　　},

　　　　　handelscroll() {
 　　　　　　　　 this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
　　　　　　},

　　　　　下面这个是生命周期，（从列表页面到详情页面）

　　　　  deactivated (){
  　　　　　　sessionStorage.setItem(‘scrollTop‘,this.scrollTop)     把scrollTop值存起来，，也可以通过vuex来存值
　　　　　　},

　　　　

　　　　activated () {
  　　　　　　document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =sessionStorage.getItem(‘scrollTop‘)
　　　　},