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 forEach通用循环遍历方法
Oct 11 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
清除输入框内的空格
Dec 21 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
javascript遍历对象的五种方式实例代码
Oct 24 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
MySQL授权问题总结
2007/05/06 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
采用call方式实现js继承
2014/05/20 Javascript
javascript为下拉列表动态添加数据项
2014/05/23 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
基于vue 实现token验证的实例代码
2017/12/14 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
node.js基础知识小结
2018/02/26 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
js实现日历
2020/11/07 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python join()函数原理及使用方法
2020/11/14 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
连锁经营管理专业大学生求职信
2013/10/30 职场文书
电脑教师的自我评价
2013/12/18 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
股东合作协议书
2014/04/14 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
小学新课改心得体会
2016/01/22 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android