vue实现前进刷新后退不刷新且后退时回到历史浏览位置

Vue实现前进刷新后退不刷新且后退时回到历史浏览位置

需求
最近的项目需要实现从列表页跳到详情页后再从详情页回退到列表页时能顾回到历史浏览的位置（也就是滚动条上次滚动的位置）
实现
1.在router文件里需要缓存、记录位置的组件里添加keepAlive参数

  {
      path: "/owner",
      name: "owner",
      component: owner,
      meta: {
        requireAuth: true,
        keepAlive: true
      }
   },

2.在App.vue里添加如下代码

<keep-alive >
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>

3.在beforeRouteEnter钩子函数中判断页面来源

beforeRouteEnter(to, from, next) {
    if(from.name === 'browse') { //判断是从哪个路由过来的，若是detail页面不需要刷新获取新数据，直接用之前缓存的数据即可
        to.meta.isBack = true;
    }
    next();
}

4.在activated钩子函数中增加相应的判断

if(!this.$route.meta.isBack){
     // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
       this.data = ''// 把数据清空，可以稍微避免让用户看到之前缓存的数据
       this.getData();
   }
   // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
   this.$route.meta.isBack=false
 }

上面的操作已基本实现页面前进刷新后退不刷新的功能，接下来要实现回退时回到历史浏览位置
1.写一个获取当前滚动条位置的函数(在data里添加参数scrollTop)

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

2.在created或者mounted钩子函数中绑定滚动事件记录记录滚动条位置的函数、在deactivated钩子函数中把滚动条位置存储到sessionStorage里

 document.addEventListener('scroll',this.handelscroll)

 deactivated (){
    console.log('执行deactivted钩子');
    sessionStorage.setItem('scrollTop',this.scrollTop.toString())
 },

3.在activated钩子函数中从sessionStorage里获取滚动条的高度并赋值给当前的滚动条即可

  doc.body.scrollTop =doc.documentElement.scrollTop = window.pageYOffset =Number(sessionStorage.getItem('scrollTop'));