vue后退时保存滚动条位置

在项目中遇到了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中的代码。真是复杂的方法。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值