0

试了官方示例中的scrollBehavior是可以在后退时回到之前的滚动的位置的,但是在我自己的项目中,savedPosition可以打印出之前的位置,但是都是回到顶部,不会回到之前的位置。
经过测试发现是因为页面有网络请求,去掉网络请求就正常了。
于是就想用keep-alive,这样是可以在后退时停留在之前位置了,但是进入下一个页面时也会停留在之前的位置,而且这样所有组件都被缓存了,不卸载掉整个页面就不会重新请求。
所以有什么办法能在后退时停留在之前的滚动位置吗?

查看全部 5 个回答

0
let indexScrollTop = 0;
router.beforeEach((to, from, next) => {
  if (from.path === '/home') {
    // 离开之前先保存滚动的位置
    indexScrollTop = document.body.scrollTop;
  }
  if (to.path === '/home') {
    // 再次进入时,强制滚动到离开时的位置
    window.scrollTo(0, indexScrollTop);
  }
  next();
});

该答案已被忽略,原因:不符合答题规范 - 内容不是答案,可用评论、投票替代

推荐答案

1

导致页面返回时没有滚动到离开时的位置是因为页面是内容是通过网络请求之后再渲染的。
可以通过setTimeout来滚动到页面离开时的位置


scrollBehavior (to, from, savedPosition) {
    if(savedPosition) {
        setTimeout(() => {
            window.scrollTo(savedPosition.x, savedPosition.y)
        }, 200)
    }
}

或者结合keep-alive来达到后退时不刷新数据,前进时刷新数据的效果。

new VueRouter({
    mode: 'history',
    routes: [{
        path: '/foo',    
        component: (resolve) => {
            require(['views/foo'], resolve)
        },
        meta: {isKeepAlive: true}
    }],
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition || typeof savedPosition == 'undefined') { //从第二页返回首页时savePosition为undefined
            //只处理设置了路由元信息的组件
            from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : false;
            to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : true;
            if(savedPosition) {
                return savedPosition;
            }
        } else {
            from.meta.isKeepAlive = typeof from.meta.isKeepAlive == 'undefined' ? undefined : true;
            to.meta.isKeepAlive = typeof to.meta.isKeepAlive == 'undefined' ? undefined : false;
        }
    }
})


<keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.isKeepAlive"></router-view>