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学习笔记(一) 在html中使用javascript
Jun 18 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
Vue实现页面添加水印功能
Nov 09 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
关于文本留言本的分页代码
2006/10/09 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
在JavaScript中操作时间之setYear()方法的使用
2015/06/12 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
推荐8款常用的Python GUI图形界面开发框架
2020/02/23 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
服装厂厂长职责
2013/12/16 职场文书
教师专业自荐书范文
2014/02/10 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
素质教育标语
2014/06/27 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
如何写股份合作协议书
2014/09/11 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
植物园观后感
2015/06/11 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Python简易开发之制作计算器
2022/04/28 Python