前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >vue返回上一页面时回到原先滚动的位置

vue返回上一页面时回到原先滚动的位置

作者头像
honey缘木鱼
发布于 2018-12-27 09:19:38
发布于 2018-12-27 09:19:38
3.1K00
代码可运行
举报
文章被收录于专栏:娱乐心理测试娱乐心理测试
运行总次数:0
代码可运行

项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面。

思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为:

(1).在App.vue中加入:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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页面

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default new Router({
  routes: [{
    path: '/',
    name: 'index',
    component: index,
    meta: {
      keepAlive: true
    }
  },

这样在index.vue中,mounted方发只走一次,在浏览器上实现了返回原来滚动位置的目的。但是在手机上测试,发现没用,

解决手机上实现目的的方法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    next()
  },
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
    next(vm => {
      document.body.scrollTop = vm.scrollTop
    })
  },

OK!实现!!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.18 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue 路由 按需 keep-alive
从 详情页 –>返回 列表页 的时候页面的状态是缓存,不用重新请求数据,提升用户体验。
青梅煮码
2023/01/31
5180
vue面试常见考察点总结
beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用。在当前阶段 data、methods、computed 以及 watch 上的数据和方法都不能被访问
bb_xiaxia1998
2022/10/13
8640
Vue2.0路由是否缓存的方法
3、从缓存页面跳转到不缓存页面,或者从不缓存页面跳转到缓存页面的时候,会发现watch是不能监听路由的,是因为缓存和不缓存页面分别在不同的div里面,一个div里面是不可能监听到另一个div的路由的,所有需要把监听的路由都加上缓存(在路由添加 meta: { keepAlive: true }),路由在缓存页面之间进行跳转的时候,就可以通过监听路由来进行判断数据是否需要更新。 vue keep-alive 缓存后, 进入缓存页需要再次更新
用户7043603
2022/02/24
6990
vue中动态化的按需使用keep-alive
主要讲下啥是 keep-alive、具体到项目中怎么用的问题。 项目相关:panda-mall 1、啥是 keep-alive? 就是缓存,我们还是来看看具体的使用场景。 首先简单一点,第一种比较普遍的场景,当我们从首页-->列表页-->商详页-->再返回,这时候列表页应该是需要keep-alive的。 然后第二种,当我们从首页-->列表页-->商详页-->返回到列表页(需要缓存)-->返回到首页(需要缓存)-->再次进入列表页(不需要缓存),这时候就是按需来控制页面的keep-alive了。
Ewall
2020/04/09
1.7K0
Vue KeepAlive表单页缓存场景
KeepAlive 推荐使用include和 exclude 添加和移除缓存组件,需要Vuex的配合,我们项目比较小,没有需求大量使用Vuex,集成过于冗余。
星宇大前端
2020/07/13
1.2K0
Vue用keep-alive实现页面缓存
1.更改App.vue <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 2.在路由设置keepAlive==true进行缓存的页面,返之为false { path: '/', name: 'index',
明知山
2020/09/02
3240
说说你对Vue的keep-alive的理解
在平常开发中,有部分组件没有必要多次初始化,这时,我们需要将组件进行持久化,使组件的状态维持不变,在下一次展示时,也不会进行重新初始化组件。
bb_xiaxia1998
2022/10/05
6180
【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边栏菜单生成、标签栏开发)
页面比较简单,主要分为左侧的菜单栏,顶部的导航栏(折叠左侧菜单,切换暗黑模式,员工账号名,退出登录),再下面的标签栏,之后就是主页面显示区域。
十里青山
2023/04/28
4.6K0
【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之主页面开发(侧边栏菜单生成、标签栏开发)
滴滴前端一面高频vue面试题及答案1
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值),匿名组件不能被匹配
bb_xiaxia1998
2023/01/03
7040
vue中keep-alive、activated的探讨和使用「建议收藏」
在修改公司的一个项目的时候发现了activated这个东西,一直觉得很疑惑,之前也没怎么用过啊!官网的生命周期那也没说过这东西啊!生命周期不就create mount update 和destory这几个东东么,怎么多了个activate出来。 百思不得其解,于是去问了下度娘和查了下文档!恍然大悟,原来这东东是结合keep-alive这东东使用的,下面顺便记录一下。
全栈程序员站长
2022/11/01
1.7K0
vue keep-alive
结合router,缓存部分页面 使用$route.meta的keepAlive属性:
河湾欢儿
2018/09/06
8700
【Vuejs】420- 带你了解vue-router之keep-alive
keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染。 用法也很简单:
pingan8787
2019/11/25
1.4K0
KeepAlive 组件深度解析:缓存与性能优化之道
今日推荐 《Spring Core核心类库的功能与应用实践分析》这篇文章介绍了Spring Core核心类库的功能与应用实践。Spring Core作为Spring框架的基础部分,提供了控制反转(IOC)和依赖注入(DI)等核心功能,以及企业级功能如JNDI和定时任务等。在实际开发中,我们可以根据具体需求选择合适的配置方式(如XML或注解)来实现Bean的配置和管理。
Front_Yue
2024/12/02
2320
KeepAlive 组件深度解析:缓存与性能优化之道
Vue之Router(三)
  前面说过,当你使用 this.$router 获取的时候其实就是获取了 router 实例。
yuanshuai
2022/08/22
5040
Vue之Router(三)
VUE面试题
Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
李才哥
2019/07/10
2.9K0
VUE面试题
2020前端技术面试必备Vue:(二)组件篇
上一章已经更新了Vue基础,那么本章将更新Vue中最重要的概念--组件,会介绍到组件的使用,组件传值,插槽的使用,插槽的分类。
程序员海军
2021/10/11
6090
2020前端技术面试必备Vue:(二)组件篇
vue-router的超神之路
本文是vue-router系列。这里从浏览器到vue-router原理到最佳实践都会有详细的讲解。由于篇幅较长,建议可以选择感兴趣的目录看。
用户4131414
2020/03/19
1.6K0
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
也就是使用v-for这样通过循环生成的列表,应给每个列表项一个稳定且唯一的key,这样有利于在列表变动时,尽量少的删除、新增、改动元素。
watermelo37
2025/01/22
770
Vue 性能革命:揭秘前端优化的终极技巧;Vue优化技巧,解决Vue项目卡顿问题
vue2笔记12 router路由
添加replace属性,导航时使用新地址替换当前导航历史记录,而不是压入历史记录栈
路过君
2022/04/13
6610
面试官:说说你对keep-alive的理解是什么?怎么缓存当前的组件?缓存后怎么更新?
keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM
@超人
2021/02/26
2.8K0
面试官:说说你对keep-alive的理解是什么?怎么缓存当前的组件?缓存后怎么更新?
相关推荐
vue 路由 按需 keep-alive
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档