vue如何实现返回上一页面时回到原先滚动的位置-创新互联
这篇文章主要为大家展示了“vue如何实现返回上一页面时回到原先滚动的位置”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何实现返回上一页面时回到原先滚动的位置”这篇文章吧。
创新互联建站主营大武口网站建设的网络公司,主营网站建设方案,
成都APP应用开发,大武口h5
微信平台小程序开发搭建,大武口网站营销推广欢迎大武口等地区企业咨询
项目结束，测试时发现在首页商品列表中，向上滑动几页后点击进入详情，从详情页面返回商品列表时，页面回到了最顶部，测试不通过说是用户体验不好，要求从哪里点击进去返回该页面时回到原先的滚动页面。
思路：因为vue是单页面应用，进入其他页面时会销毁该页面，用keep-alive不让其刷新，具体实现为：
(1).在App.vue中加入：
(2).index.js页面
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
meta: {
keepAlive: true
}
},这样在index.vue中，mounted方发只走一次，在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试，发现没用，解决手机上实现目的的方法：
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},//进入该页面时，用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},OK！实现！！
以上是“vue如何实现返回上一页面时回到原先滚动的位置”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享文章：vue如何实现返回上一页面时回到原先滚动的位置-创新互联
标题路径：
http://kswjz.com/article/copjsg.html
