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 高级语法介绍
Jun 15 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
Javascript闭包实例详解
Nov 29 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
Apr 26 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
php动态生成JavaScript代码
2009/03/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
2016/09/05 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python生成器generator用法实例分析
2015/06/04 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python爬虫框架scrapy实战之爬取京东商城进阶篇
2017/04/24 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python创建文件备份的脚本
2018/09/11 Python
python取余运算符知识点详解
2019/06/27 Python
numpy 声明空数组详解
2019/12/05 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
Python代码注释规范代码实例解析
2020/08/14 Python
Python自动登录QQ的实现示例
2020/08/28 Python
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
建筑学推荐信
2013/11/03 职场文书
党员培训思想汇报
2014/01/07 职场文书
食品安全检查制度
2014/02/03 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
班干部演讲稿
2014/04/24 职场文书
工厂门卫的岗位职责
2014/07/27 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript