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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
详解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加密解密的代码
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
php验证码生成器
2017/05/24 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
laravel利用中间件做防非法登录和权限控制示例
2019/10/21 PHP
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
Three.js基础部分学习
2017/01/08 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
Python3实现的回文数判断及罗马数字转整数算法示例
2019/03/27 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
安全生产投入制度
2014/01/29 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书