木灵鱼儿
阅读:3456
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的替代品
使用了这个方法,当前页面滚动条位置得以保存,下一个子级页面滚动可以默认归零,页面从子级页面点击返回后,当前的页面滚动条位置保持不变,这真是一个妙哉方法,好用啊
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面
最近写项目遇到一个问题,很头疼,几天了,问了好些大佬,都没有找到问题的解决方案,但是,最后还是被我找到了,可喜可贺...问题有一个home页,home页里面有router-link元素进行子路由切换,为了减少资源损耗,所以直接使用了keep-alive进行路由页缓存,假设有三个子路由abc,a路由页面有两个子路由a-1和a-2,默认是a-1显示。当我们进入到a路由是,默认显示a-1,然后我们切换到a-2,然后路由push返回到home页,再次进入到a页面时,你会发现,a路由此时显示的a-2而不是a-1,但浏览器地址是a-1的地址,此时,我们可能没办法切换到a-1了。问题图为什么主要因为k...

vue keep-alive 白名单(include)和黑名单(exclude)
keep-alive作为vue的缓存标签,有时候也会遇到一些问题,比如,某些页面我们不想缓存,以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。但现在不一样了,以前的那种方法并不适合现在了,因为keep-alive自带了黑名单和白名单,在白名单中的路由或者组件将会缓存,黑名单中的则不会缓存。例子 <keep-alive include="a,b" exclude="c,d"> <router-view/> </keep-alive>多个组件用英文逗号隔开,单个就写...
keep-alive 滚动条位置不还原的问题
我想来想去,可能是布局的问题,或者是过渡动画导致的,元素的scroll无法记住。我尝试给html,body,和最外围的父元素隐藏滚动条,然后只给内容的容器元素设置滚动条,结果切换的时候还是无法记住。实在没辙,只能用点强迫办法了,就是在路由出去之前记住当前容器的滚动条高度,然后进入的时候延迟一点点时间,再恢复,为什么要延迟呢,这个主要是因为动画的问题。在需要记住滚动条高度的路由页面使用路由守卫://离开之前保存scrollTop beforeRouteLeave(to, from, next) { //保存滚动条元素div的scrollTop值 this.scrollY = ...
古哥
Google Chrome Windows 10网站顶部的各种语言只是一个摆设吗,好像不能翻译。
木灵鱼儿
FireFox Windows 10不行,懒得搞啊,没啥用处,拿来充门面的,以后闲着再弄吧( ̄3 ̄)