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 ...
随机推荐
- 勾勾街——一个专注于免越狱免签名的苹果ios APP打包生成的网站
自涛舅舅研发的“苹果ios APP自助生成系统”上线以来,每天都有大量的用户注册和生成免越狱app,为什么? 因为我们有明显的技术优势,APP不需要上架appstore, 生成APP又不需要企业签名证 ...
- javascript 数据类型 -- 检测
一.前言 在上一篇博文中 Javascript 数据类型 -- 分类 中,我们梳理了 javascript 的基本类型和引用类型,并提到了一些冷知识.大概的知识框架如下: 这篇博文就讲一下在写代码的过 ...
- string 转 int
1.stringstream 用流转换 cin cout都是流的操作 iostream cin的时候,从屏幕读取字符串流,自动判断类型(省去了scanf的格式控制) stringstream ...
- webpack学习最基本的使用方式(一)
网页中引入的静态资源多了以后会有什么问题.? 1.网页加载速度慢,因为我们要发起很多的二次请求 2.要处理错综复杂的依赖关系 如何解决上面的问题 1.合并,压缩图片,使用精灵图 2.可以使用之前学过的 ...
- iptables安装
1.安装iptable iptable-service #先检查是否安装了iptables service iptables status #安装iptables yum install -y ipt ...
- C#转发Post请求,包括参数和文件
/// <summary> /// 转发Post请求 /// </summary> /// <param name="curRequest">要 ...
- swust oj 1013
哈希表(开放定址法处理冲突) 1000(ms) 10000(kb) 2698 / 6177 采用除留余数法(H(key)=key %n)建立长度为n的哈希表,处理冲突用开放定址法的线性探测. 输入 第 ...
- Bugly 多渠道热更新解决方案
作者:巫文杰 Gradle使用productFlavors打渠道包的痛 有很多同学可能会采用配置productFlavors来打渠道包,主要是它是原生支持,方便开发者输出不同定制版本的apk,举个例子 ...
- 【安富莱原创开源应用第3期】花式玩转网络摄像头之VNC远程桌面版本,稳定运行2年不死机
说明: 1.前段时间开源了一个网络摄像头的TCP版本 https://www.cnblogs.com/armfly/p/9173167.html,这次再来一个远程VNC的版本.使用更方便,无需大家制作 ...
- GT-随身调详细教程
一.GT介绍 GT(随身调)是APP的随身调测平台,它是直接运行在手机上的“集成调测环境”(IDTE, Integrated Debug Environment).利用GT,仅凭一部手机,无需连接电脑 ...