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:以前写的xmlhttp池,代码
May 18 Javascript
Mootools 1.2教程 函数
Sep 15 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
JS实现随机抽取三人
Nov 06 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python如何存储数据到json文件
2020/03/09 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
自主招生自荐信格式
2013/12/03 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
股权投资意向书
2014/04/01 职场文书
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android