vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
vue中,我们所要实现的一个场景就是:
1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据,
2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置。
最近在项目中遇到这个问题,思考了几套方案,总是不太完善。百度搜到的方案也基本都只能满足一些很简单的需求。对于复杂一些的情况,还是有些不完善的地方。以下是个人对于这种场景的一个摸索,也参考了百度。如有更好的方案,欢迎指出。
- 缓存组件,vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive:
<keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive> <router-view v-if="!$route.meta.keepAlive"/>复制代码
这里是根据路由中的meta源信息中的keepAlive字段来判断当前路由组件是否需要缓存。这里的meta的keepAlive是我们自定义的,当然你也可以叫别的名字。
下面在router/index.js即我们的路由文件中,定义meta信息:
// list是我们的搜索结果页面 { path: '/list', name: 'List', component: resolve => require(['@/pages/list'], resolve), meta: { isUseCache: false, // 这个字段的意思稍后再说 keepAlive: true // 通过此字段判断是否需要缓存当前组件 } },复制代码
上面的component: resolve => require(['@/pages/list'], resolve)这里的组件引入方式可能和大家平时写的有些不一样,这里是为了路由的懒加载用的,大家可以忽略。按照正常的import引入也可以,这个和本次的主题无关。如此一来,vue的路由会帮我们去缓存list页面。
- 刷新数据or缓存数据的实现:
说这之前,先简单说一下和缓存相关的vue钩子函数。
设置了keepAlive缓存的组件:
第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated
后续进入时:beforeRouterEnter ->activated->deactivated
可以看出,只有第一次进入该组件时,才会走created钩子,而需要缓存的组件中activated是每次都会走的钩子函数。所以,我们要在这个钩子里面去判断,当前组件是需要使用缓存的数据还是重新刷新获取数据。思路有了,下面我们来实现:
// list组价的activated钩子activated() {// isUseCache为false时才重新刷新获取数据// 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的 if(!this.$route.meta.isUseCache){ this.list = []; // 清空原有数据this.onLoad(); // 这是我们获取数据的函数} },复制代码
这里的isUseCache 其实就是我们用来判断是否需要使用缓存数据的字段,我们在list的路由的meta中已经默认设置为false,所以第一次进入list时是获取数据的。
当我们从详情页返回时,我们把list页面路由的isUseCache设置成true,这样我们在返回list页面时会使用缓存数据:
// 详情页面的beforeRouteLeave钩子函数 beforeRouteLeave (to, from, next) { if (to.name == 'List') {to.meta.isUseCache = true; } next(); },复制代码
我们这里是在即将离开detail页面前判断是否返回的列表页。如果是返回list页面,则把list页面路由的isUseCache字段设置成true。为什么这样设置呢?因为我们对list组件使用的keep-alive进行缓存组件,其默认就是使用缓存的。而我们又在list组件的actived钩子函数中进行了判断:只有在list页面的isUseCache==false时才会清空原有数据并重新获取数据。所以此处设置isUseCache为true,此时返会list页面是不会重新获取数据的,而是使用的缓存数据。
detail返回list可以缓存数据了,那么search前往list页面时怎么让list页面不使用缓存数据而是获取新数据呢?我们重新回到list的activated钩子中:
// list组价的activated钩子activated() {// isUseCache为false时才重新刷新获取数据// 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的 if(!this.$route.meta.isUseCache){ this.list = []; // 清空原有数据this.onLoad(); // 这是我们获取数据的函数this.$route.meta.isUseCache = false; } },复制代码
我们加了一行this.$route.meta.isUseCache=false;也就是从detail返回list后,将list的isUseCache字段为false,而从detail返回list前,我们设置了list的isUseCache为true。所以,只有从detail返回list才使用缓存数据,而其他页面进入list是重新刷新数据的。
至此,一个前进刷新、后退返回的功能基本完成了。
如果场景再复杂一丢丢,比如,如果这个详情页是个订单详情,那么在订单详情页可能会有删除订单的操作。那么删除订单操作后会返回订单列表页,是需要列表页重新刷新的。那么我们需要此时在订单详情页进行是否要刷新的判断。简单改造一下详情页:
data () { return {isDel: false // 是否进行了删除订单的操作 } }, beforeRouteLeave (to, from, next) { if (to.name == 'List') {// 根据是否删除了订单的状态,进行判断list是否需要使用缓存数据to.meta.isUseCache = !this.isDel; } next(); }, methods: { deleteOrder () { // 这里是一些删除订单的操作// 将状态变为已删除订单// 所以beforeRouteLeave钩子中就会将list组件路由的isUseCache设置为false // 所以此时再返回list时,list是会重新刷新数据的 this.isDel = true; this.$router.go(-1)} }复制代码
至此,算是解决了我的vue项目中的这个前进刷新、后退缓存数据和浏览位置的问题。
最后再提一下,页面滚动位置的问题。
问题1:我们知道,在vue这种单页应用中,如果你在a页面滚动了一段距离后,此时前往b页面后,b页面也会停留在a页面的滚动位置。这个问题的解决,我们可以利用router本身提供的功能来解决:
routes: [ { path: '/detail', name: 'Detail', component: resolve => require(['@/pages/detail'], resolve) } ], scrollBehavior (to, from, savedPosition) {if (savedPosition) { return savedPosition } else { if (from.meta.keepAlive) { from.meta.savedPosition = document.body.scrollTop; } return { x: 0, y: to.meta.savedPosition || 0 } } }复制代码
scrollBehavior是路由提供的基础功能,这段函数写的是:
1.如果通过浏览器自带的前进后退按钮切换的路由,那么会自动使用浏览默认的回滚上次页面的浏览位置。
2.如果是通过vue路由进行的页面切换。例如a前往b,首先判断a是不是通过keep-alive缓存的组件,如果是,则在a路由的meta中添加一个savedPosition字段,并且值为a的滚动位置。最后return的是页面需要回滚的位置。如此一来,如果打开一个页面,该页面的组件路由中meta.savedPosition为undefined的话,则页面滚动到(0,0)的位置,这样解决了问题1。那么如果打开一个页面,它的路由的meta.savedPosition有值的话,则滚动到上次浏览的位置,因为meta.savedPosition保存的就是上次浏览的位置。
原文发布时间:2018-06-22
原文作者:chinaBerg
本文来源掘金如需转载请紧急联系作者
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践相关推荐
- vue项目实现详情页后退缓存之前的数据
vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244 一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实现 ...
- 在Asp.NET Core中如何优雅的管理用户机密数据
在Asp.NET Core中如何优雅的管理用户机密数据 背景 回顾 在软件开发过程中,使用配置文件来管理某些对应用程序运行中需要使用的参数是常见的作法. 在早期VB/VB.NET时代,经常使用.ini ...
- python使用statsmodels包中的tsa.acf函数计算时间序列数据所有滞后位置个数(级别)的自相关性(autocorrelation for every lag)
python使用statsmodels包中的tsa.acf函数计算时间序列数据所有滞后位置个数(级别)的自相关性(autocorrelation for every lag) 目录
- python使用statsmodels包中的tsa.acf函数计算时间序列数据所有滞后位置个数(级别)的自相关性、tsaplots函数可视化时间序列数据所有滞后位置个数(级别)的自相关性
python使用statsmodels包中的tsa.acf函数计算时间序列数据所有滞后位置个数(级别)的自相关性.tsaplots函数可视化时间序列数据所有滞后位置个数
- vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践
从列表页 ------> 详情页, 再从详情页 -----> 列表页 ,要保存上次已经加载的数据和自动还原上次的浏览位置 1. 缓存组件,vue2中提供了keep-alive.首先在我们的 ...
- vue中使用keepAlive组件缓存遇到的坑
项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...
- Vue中token刷新及token过期的实现
总:通过axios,vuex,及自定义的方法实现. 以下是思路: 1.做token刷新必不可少的是,token(请求时的token) / refresh_token(刷新token时用的refresh ...
- vue中拿到接口,并获取数据,渲染到页面
首先index.html完成的是单页面展示,app.vue里面已经写了视图出口, 例如;先新建一个role.vue页面,写上相应的布局和内容,然后在路由中添加这个页面. 然后开始写渲染数据的方法 前提 ...
- 前进刷新后退缓存及第一次缓存无效
A->B->C A到B刷新,C到B缓存 App.vue里的代码字段 <keep-alive v-if="isRouterAlive" :exclude=" ...
最新文章
- 一个用户实体应该有它自己的实体验证,即一个实体应该有它的属性,方法,扩展属性及验证机制组成...
- 20151024学习内容:安全相关
- 最大团问题-分支界限法
- Web APP开发技巧总结(转)
- helm快速部署一个nginx应用并更改service类型为NodePort、自定义Chart的发布
- Ionic Angular自动捕获错误 配置Angular2.x +
- db2 联邦 mysql_DB2联邦数据库及配置方法(及联邦密码修改)
- Scrapy 发起post请求
- python snownlp了解_python snownlp情感分析简易demo
- wps怎么免费导出简历_稻壳儿简历免费手机,手机wps如何免费导出简历?
- matlab 使用textscan读取带文本的csv文件
- F27.U盘-做过重装系统启动盘后内存变小方法解决方法-cmd格式化U盘
- 王之泰201771010131《面向对象程序设计(java)》第十二周学习总结
- 二维矩形件排样算法之最低水平线算法实现
- 新能源汽车的电池寿命
- 计算机音乐谱大全eiei,彼岸吉他谱频道-求谱eiei,偶像练习生,求吉他谱,尤克里里谱,简谱,五线谱,钢琴谱,乐队总谱,乐谱-彼岸吉他 - 一站式吉他爱好者服务平台...
- 中国行政区划数据下载
- 四向车立体库|四向穿梭车AGV如何进行入库和出库?
- Unity旋转值Quaternion交换旋转轴
- c# hdf5 写string_C# hdf5 文件操作入门
热门文章
- excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,*内容*),0,1)
- Groovy操纵集合秘籍
- Corosync与Pacemaker实现nfs作为共享存储的MySQL高可用
- Java抓取电脑屏幕
- Visual C++开发工具与调试技巧整理
- 采用install.sh安装脚本进行快速安装astercc
- 优化网站性能 提高网站速度访问速度的14条实践(转)
- day2-安装python以及基本使用
- 国产SSD市场机遇与挑战并存
- mongodb创建集合命令db.createCollection详解