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滚动条位置
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 2
古哥
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10