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


Posted in Javascript onDecember 20, 2018

项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。
思路:因为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!实现!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
一张Web前端的思维导图分享
Jul 03 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
JS前端笔试题分析
Dec 19 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
vue+axios+promise实际开发用法详解
Oct 15 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 #Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 #Javascript
JavaScript链式调用实例浅析
Dec 19 #Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 #Javascript
如何为vue的项目添加单元测试
Dec 19 #Javascript
浅谈Angular7 项目开发总结
Dec 19 #Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 #Javascript
You might like
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
Jquery插件写法笔记整理
2012/09/06 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
用python写扫雷游戏实例代码分享
2018/05/27 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
J2EE面试题
2016/03/14 面试题
大学生护理专业自荐信
2013/10/03 职场文书
自考自我鉴定范文
2013/10/30 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
部门主管竞聘书
2015/09/15 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
2016年度先进班组事迹材料
2016/03/01 职场文书
python glom模块的使用简介
2021/04/13 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android