vue页面刷新回到页面顶部的方法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue页面刷新回到页面顶部的方法相关的知识,希望对你有一定的参考价值。

参考技术A 为了想页面回到顶部,只需要对路由进行修改,在router下index.js中:

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

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

(2).index.js页面

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

OK!实现!!

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

以上是关于vue页面刷新回到页面顶部的方法的主要内容,如果未能解决你的问题,请参考以下文章

vue-router刷新页面后回到首页

刷新页面使页面保持在当前位置显示而不跳回顶部

vue登录刷新回到首页的问题

vue中常用的两中页面刷新的方式和页面回退

Vue页面手动刷新,导航栏激活项还原到初始状态问题解决方案

uniapp页面下拉刷新