vue返回上一页面时回到原先滚动的位置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue返回上一页面时回到原先滚动的位置相关的知识,希望对你有一定的参考价值。

参考技术A 项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。
思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:
(1).在App.vue中加入:

(2).index.js页面

这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试,发现没用,
解决手机上实现目的的方法:

OK!实现!!

链接: https://www.jianshu.com/p/5f01f9a51a98

vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法

vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。

这个功能只在 HTML5 history 模式下可用。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})
{ x: number, y: number }
{ selector: string }
scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

 

以上是关于vue返回上一页面时回到原先滚动的位置的主要内容,如果未能解决你的问题,请参考以下文章

vue实现返回上一页面,页面停留在原来位置,不刷新

vue-scroller返回页面记住滚动位置

js在新页面中返回到上一页浏览的历史位置

关于浏览器返回上个界面时回到上到浏览的位置

vue 返回记住滚动条位置

《解决微信内置浏览器返回上一页强制刷新问题方法》