在项目中遇到了vue后退时保存滚动条位置的问题,找到了三个方法来解决。
一、使用vue的keep-alive属性
使用<keep-alive> </keep-alive>
包裹组件能使组件被缓存起来,而不是被销毁。所以当你浏览器后退时,理所应当的就会回到原来滚动条滚动的位置。
keep-alive组件的include、exclude、max属性能更加轻松的完成你想要的结果。
注意:
1.组件名已经写在include数组了,为什么页面还是没有缓存到?
答: 你可能忘记给组件声明name属性了。
2.我的组件确确实实被缓存了,但是滚动条并没有为什么?
答:作者也遇到了这个大问题,找了半天原因是给组件设置了高度100vh。浅显而言,keep-alive功能缓存的是父元素相对于组件的scrollTop。滚动条在组件内部,恰恰你有设置了他的高度为100%,最外层获取的scrollTop会产生偏差
二、使用vue-router的滚动行为
在创建vue-router实例的地方加上scrollBehavior方法。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
第三个参数savePosition返回的值类似: {x: 0, y: 0}
这样也可以达到想要的结果。
注意:这个功能只在支持 history.pushState 的浏览器中可用。
容易产生误导的是,在支持history.pushState的浏览器使用,而不是使用history模式之下使用。所以一般我们也可以使用这个方法。
三、获取scrollTop的值
如标题所示,获取scrollTop的值,把他保存在vuex中或者localStorage等也行。
但是因为种种原因,你还必须用<keep-alive></keep-alive>
包裹住,用vue提供的activated钩子来检测,以此获取保存在vuex中的代码。真是复杂的方法。