想请教一下,用vue-router返回的时候滚动条在原位置怎么做?用默认的hash模式的。
比如一个list页点击进入detail页,我在这时记录下list页滚动条的位置,然后在detail页返回到list页时设置滚动条位置为刚才保存那个值。但这样做会出现一个滚动条在顶部突然变到那个值的地方,体验比较差。
// list页route中的data钩子 route : { data : function () { var _this = this; // 返回同一个位置 var scrollTop = sessionStorage.getItem("scrollTop"); if (scrollTop) { _this.$nextTick(function () { $(".abuild-record-layout").scrollTop(scrollTop); }); } } }
就是这样一个列表页,一个详情页,然后在返回列表页,滚动条需要回到原来的位置
解决办法就是:
建议使用vuex做state管理,在View1
mounted
(对应vue1.0的attached
)后,检查当前state数据的length,只有当length === 0时,才去Load Data。而返回或者history.go(-1), 不会改变state的。一周热门 更多>