vue keep-alive 实现详情返回列表保留页面数据
实现功能
- 详情页返回列表页,列表页保留上次浏览位置
- 其它页面进入到列表表,列表页刷新
- 当详情页有数据改变时,列表页也要更新该条数据
实现思路
- 用keep-alive保留列表页面数据
- activated钩子函数来更新数据
- 利用路由守卫判断是否从详情页返回来决定是否更新数据
- 当详情数据改变时,返回列表后利用
vm.$set(vm.list,index,newValue)
或vm.list.splice(i,1)
进行更新
具体实现
1. 设置keepalive
App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" /> router/index.js
{
path: ...,
name: ...,
meta: {
title: '列表',
keepAlive: true,
canKeep:false
},
component: ...
},
2. 在列表页路由守卫判断是否保留数据,只在详情返回做保留
beforeRouteEnter(to, from, next) {
if (from.name == "detail") {
to.meta.canKeep = true;
} else {
to.meta.canKeep = false;
}
next();
},
3. 在activated中更新数据
activated() {
if (!this.$route.meta.canKeep) {
// 在这里发送请求,刷新数据
}
},
4. 列表更新单条数据
activated() {
// 刷新数据
if (!this.$route.meta.canKeep) {
...
window.scrollTo(0, 1);
} else {
// 不刷新数据 但详情页数据有更改时
this.showPackageList.forEach((item,idx) => {
if(..){
item.looked = true;
// 更新某一条数据
this.$set(this.showPackageList, idx, item);
}
})
}
this.rollingLoad();
},
遇到问题
从详情1返回列表时正常,进入其它页面,返回,列表数据更新,进入详情2,返回列表,此时列表会自动定位到从列表进入详情1时的位置,而不是进入详情2前的位置。
原因
列表只做了数据刷新,位置信息依旧保留,当列表刷新后,如果页面触发过滚动,位置信息得到更新,再次返回则正常,无触发滚动则再次返回会回到第一次定位的位置
解决方法
在列表数据更新后,手动触发滚动
activated() {
if (!this.$route.meta.canKeep) {
// 刷新数据
// 重置页面位置
window.scrollTo(0,1)
}
},
以上就是 keep-alive 实现详情返回列表保留页面数据。。。。
vue keep-alive 实现详情返回列表保留页面数据的更多相关文章
- django学习-16.返回给前端页面数据为json数据类型的3种方案
目录结构 1.前言 2.JsonResponse类的源码简单分析 2.1.JsonResponse类的源码如下所示 2.2.JsonResponse类的构造函数里的每个入参的大概含义和作用 3.[方案 ...
- vue单页应用中 返回列表记住上次滚动位置、keep-alive缓存之后更新列表数据 那点事
实践场景需求 产品列表中,滚动到一定位置的时候,点击查看产品信息,后退之后,需要回到原先的滚动位置,这是常见的需求 所有页面均在router-view中,暂时使用了keep-alive来缓存所有页面, ...
- vue的登陆验证及返回登录前页面实现
一.路由配置部分如下所示, 导出路由示例 let router = new VueRouter({ routes: [ // 登陆 { name: 'login', path: '/login', c ...
- vue 同一个组件的跳转, 返回时保留原来的下拉位置
1,需求分析 公司的项目有这样一个需求: 同一个list组件,根据传过来的listId渲染成多个页面,每个页面都可以下拉.在返回到不同的list页面时,要保留当时下拉的位置. 说的我自己都有点懵逼了, ...
- vue中keepAlive的用法[返回页面不刷新]
本文转载于時間蒼白了誓言_49b9 使用vue单页开发项目时遇到一个问题:在列表页进入详情页,按返回键返回列表页时页面刷新了,用户体验非常差啊!!!查阅了一下相关问题,使用解决这个问题,下面是我的使用 ...
- 058——VUE中vue-router之实例操作新闻列表单页面应用与路由别名的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JEECMS中返回列表跳转的几种方式
1.返回的不是当前类 <span class="tools pull-right"> <button class="btn btn-info" ...
- iOS 自定义返回按钮,保留系统滑动返回
原文链接 自定义返回按钮保留系统滑动返回手势.gif 1.简介 使用苹果手机,最喜欢的就是用它的滑动返回.作为一个开发者,我们在编写很多页面的时候,总是会因为这样那样的原因使得系统的滑动返回不可用.使 ...
- 【Python】考虑用生成器改写直接返回列表的函数
使用生成器的好处是显而易见的,可以使代码更加清晰,同时减小内存的消耗,当函数需要返回列表,把函数改写为生成器是相对容易的. 下面这两个函数返回字符串中每个单词的索引: def index_words1 ...
随机推荐
- java自动化-实际使用junit的演示
本文简单介绍一下我写的http接口后端框架 在经过之前多篇博客介绍之后,读者应掌握如下技能 1,自动运行一个或者多个junit框架编写的java代码 2,对数据驱动以及关键字驱动有一定的了解和认识,甚 ...
- webstorm2018.2.3激活
一,简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编 ...
- 信息学奥赛辅导经验谈 & 问题教学法中的学生思维能力培养
转载来自朱全民名师工作室 信息学奥赛辅导经验谈 全国青少年信息学奥林匹克分区竞赛(简称NOI)是经中国科协.国家教育部批准,由中国计算机学会主办的一项全国性的青少年学科竞赛活动.随着信息学奥林匹克竞赛 ...
- AWSS3异步等待上传成功返回结果
/// <summary> /// 流上传文件 /// </summary> /// <param name="data">流内容</pa ...
- myeclipse集成maven
myeclipse集成maven 打开myeclipse---Window----Preferences---Maven4MyEclipse--Installations----Add,如图所示: 这 ...
- Syntax error, insert "}" to complete ClassBody错误解决
Syntax error, insert "}" to complete ClassBody 报该错误是因为我从网页上粘贴了别人的代码,并没有发现什么异常但还是编译器报红叉. 解决 ...
- Eureka-Client(Golang实现)
Eureka-Client Golang实现eureka-client 原理 根据Java版本的源码,可以看出client主要是通过REST请求来与server进行通信. Java版本的核心实现:co ...
- 马昕璐 201771010118《面向对象程序设计(java)》第十八周学习总结
实验十八 总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...
- 18 ArcGIS API for JavaScript4.X 系列加载天地图(经纬度)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Data Center手册(4):设计
基础架构 拓扑图 Switching Path L3 routing at aggregation layer L2 switching at access layer L3 switch融合了三种功 ...