vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同

木灵鱼儿 2020-07-16 16:02 4037

keep-alive之前也用的比较玄学吧，后来发现，keep-alive只能缓存当前级页面，也就是说：

如果keep-alive缓存了A和B这些同级的路由页面或者组件，那是没问题的，但是如果A页面下还有子级路由或者子组件切换，由于嵌套太深，一般是缓存不到的，所以又需要使用一次keep-alive。

但是在使用keep-alive的时候遇到一个问题啊，这个问题很烦。

虽然keep-alive缓存后，页面的滚动条位置也会相对应的缓存到，但是，正因为这个位置问题，导致A页面如果滚动了，在进入他的子路由页面的时候，子路由页面的滚动条位置会和A页面保持一致，这就很头疼了。

找了半天发现一个绝妙的方式：

methods:{
  scrollToTop() {
    window.scrollTo(0, 0);
  }
},
activated() {
  //滚动条归零
  this.scrollToTop();
}

就这两句话搞定，妙啊，测试火狐和谷歌都没问题，activated为启用缓存后的组件或页面激活时的生命周期，可以理解为created的替代品

使用了这个方法，当前页面滚动条位置得以保存，下一个子级页面滚动可以默认归零，页面从子级页面点击返回后，当前的页面滚动条位置保持不变，这真是一个妙哉方法，好用啊

登录