VUE实现路由组件切换后保存页面浏览位置

比如从路由组件A切换到组件B后，再切回A组件，希望保持上次浏览的位置

前提：组件必须是缓存路由组件

<keep-alive>
  <router-view></router-view>
</keep-alive>

 1：离开路由组件前记录页面位置

data(){  //定义在需要保持位置的组件内
  return{
    scrollNum:null 
  }
}

beforeRouteLeave(to, from, next) { // 组件内路由守卫  离开组件前记录页面位置
//为什么要获取documentElement和body的scrollTop值？因为移动端对documentElement.scrollTop是无效的
  this.scrollNum = document.documentElement.scrollTop || document.body.scrollTop
  next()
},

 2：路由组件激活时设置页面位置

activated() {   //组件激活时，将离开组件是记录的页面位置赋值
  if (this.scrollNum !== null && this.scrollNum > 0) {
    //确保移动端和pc端都能正确的设置位置
    document.documentElement.scrollTop = this.scrollNum
    document.body.scrollTop = this.scrollNum
  }
}