木灵鱼儿

木灵鱼儿

阅读:1141

最后更新:2020/07/16/ 16:02:12

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

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的替代品

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

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1141

相关文章

目录树