Vue 路由跳转记住滚动位置,返回时回到上次滚动的位置

这是一个实现上拉加载和下拉刷新功能的页面,这里用了vue-infinite-scroll插件,需要实现返回页面时页面可以自动滑动到上次滑动的位置。具体实现方式如下:
1、在App.vue文件中设置缓存组件keep-alive


  
  
 


2、路由文件中给需要记录滚动位置的页面设置keepAlive: true

{
  path: '/Info',
  name: 'InfoList',
  component: InfoList,
  meta: {
    keepAlive: true
  }
}

3、在页面注册对应的事件
(1)在data中定义一个初始值 scroll
(2)在mouted中 ,mouted中的方法代表dom已经加载完毕

mounted() {
  window.addEventListener('scroll', this.handleScroll)
}

(3)methods 用于存放页面函数

handleScroll () {
  this.scroll  = document.documentElement && document.documentElement.scrollTop
  console.log(this.scroll)
}    

4、activated 为keep-alive加载时调用

activated() {
  if(this.scroll > 0) {
    window.scrollTo(0, this.scroll); this.scroll = 0;
    window.addEventListener('scroll', this.handleScroll);
  }
}

5、deactivated 页面退出时关闭事件 防止其他页面出现问题

deactivated(){
  window.removeEventListener('scroll', this.handleScroll);
}

keep-alive和上拉加载组件infinite-scroll一起使用时,其他子组件会触发infinite-scroll
在deactivated里面将属性infinite-scroll-disabled设置为true

你可能感兴趣的:(Vue 路由跳转记住滚动位置,返回时回到上次滚动的位置)