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返回上一页面时回到原先滚动的位置的主要内容,如果未能解决你的问题,请参考以下文章