这篇文章主要介绍了vue返回上一页面时回到原先的位置的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

项目结束,测试时发现在首页商品列表中,向上几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的页面。
思路:因为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!实现!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
暗流涌动的二手手机 国内市场水货份额达39%

暗流涌动的二手手机

IDC认为,到 2024 年,全球二手智能手机出货量将达到 3.51
充电几分钟、能跑1000公里……是黑科技还是大忽悠?

充电几分钟、能跑1000

根据广汽埃安15日推出的海报,石墨烯基超级快充电池主要
内外备受冲击,知识付费走下神坛

内外备受冲击,知识付费

繁荣的背后,知识付费却也面临增长乏力的困境。内容质量
泼天股价背后,宁德时代的资本赌局

泼天股价背后,宁德时代

翻看宁德时代财报,前三季度,营收和利润双双同比下滑。而
社交媒体平台Parler或于1月底恢复上线 CEO称将每天公布进展

社交媒体平台Parler或

据报道,备受争议的社交媒体平台Parler CEO约翰·马茨(Jo
腾讯致歉PC版QQ读取浏览记录:判断是否恶意登录 数据不上传不储存

腾讯致歉PC版QQ读取浏

腾讯表示,读取的数据用于在PC QQ的本地客户端中判断是
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,