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

Question

想请教一下，用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);

            });

        }

    }

}

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

Answer 1

只需在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() {    if(this.items.length === 0) {        this.loadData();     } }