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
  • 本文分类:vue 项目实战
  • 本文标签:keep-alive滚动条位置
  • 流行热度:已超过 96 人围观了本文
  • 发布日期:2020年07月16日 - 16时02分12秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

评论(2)

    古哥

    网站顶部的各种语言只是一个摆设吗,好像不能翻译。

      木灵鱼儿

      @古哥 不行,懒得搞啊,没啥用处,拿来充门面的,以后闲着再弄吧( ̄3 ̄)

相关文章

微信收款码
微信收款码