有人问道如何记录vue页面的滚动条位置,再次载入组件的时候页面滚动到记录的位置?


思路:
记录滚动条位置我们好记

我们要在组件销毁之前也就是页面跳转的时候 需要用到生命周期beforeDistory将位置记录下来
你可以存到vue中 那么如果我们用了keep-alive怎么办 他不会销毁组件啊 ?

那么我们就用到keep-alive的生命周期 的deactivated钩子中将位置记录下来

等到再次回到页面的时候 就需要等到 组件完全加载完毕 再设置滚动条的位置 
这里我们用到vm.$nextTick()这个方法 来检测组件载入完毕 

用到vue提供的方法scrollBehavior
 scrollBehavior (to, from, savedPosition) {
  //如果有存入的位置就会滚到该位置,否者返回到页面顶部
  if (savedPosition) {
    return savedPosition
  } else {
    if (to.hash) {
      return {selector: to.hash}
    }
  }
},

Cymiran
1.2k 声望134 粉丝

跨越七海的风...