使用vue-router如何记录滚动条位置

想请教一下,用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.$nextTickfunction { $".abuild-record-layout".scrollTopscrollTop; }; } }
}

就是这样一个列表页,一个详情页,然后在返回列表页,滚动条需要回到原来的位置

切换组件时,把当前滚动条记录在vuex里面,重新加载页面的时候从vuex取值

vue-router路有选项中有个saveScrollPostion,你可以试试

https://github.com/vuejs/vue-…

@Coooooooool 说的正确,只需在vue中设置saveScrollPostioin,而vue2.0默认会保存scroll位置,你什么都不需要做。

但是问题又来了,如果一共两个View,第一个页面View1,是一个无限的分页滚动列表,假设我们向下滚动了2页后,然后点击列表中的一个Item,进入到另一个页面View2,此时返回或者调用history.go-1,发现页面重新装载(mounted)了,数据变成了第1页的。怎么办???

解决办法就是:
建议使用vuex做state管理,在View1mounted对应vue1.0的attached后,检查当前state数据的length,只有当length === 0时,才去Load Data。而返回或者history.go-1, 不会改变state的。

伪代码:

mounted { ifthis.items.length === 0 { this.loadData; }
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注