vue返回上一页面时回到原先滚动的位置的方法
2019-01-29 12:43
2356 查看
项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。
思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:
(1).在App.vue中加入:
<template> <div id="app"> <!--<router-view/>--> <!--页面返回不刷新--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>
(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!实现!!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue2.0路由切换后页面滚动位置不变BUG的解决方法
- vue页面跳转后返回原页面初始位置方法
- vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法
- vue-router如何在返回时返回到上次滚动位置 方法集锦
- vue通过滚动行为实现从列表到详情,返回列表原位置的方法
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
- js:返回到页面时滚动到上次浏览位置
- 解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法
- vue页面跳转后返回原页面初始位置
- Angular封装指令回到顶部以及滚动到特定的页面位置
- ASP.Net刷新页面后自动滚动到原来位置方法汇总
- 用JS实现页面滚动位置保持的方法
- vue2 切换路由时 页面滚动到顶部 用游览器返回时 记住上页的位置
- Extjs GridPanel 合计功能 解决滚动条滚动问题和页面刷新滚动条回到初始位置问题。
- vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
- Angular 回到顶部 滚动到特定的页面位置
- vue通过滚动行为实现从列表到详情,返回列表原位置
- html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码
- javascriptDOM对象之scrollTo()方法,滚动到页面指定位置
- vue2.0路由切换后页面滚动位置不变BUG