vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解


Posted in Javascript onSeptember 21, 2018

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保存的就是上次浏览的位置。

以上这篇vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
基于javascript滚动图片具体实现
Nov 18 Javascript
采用call方式实现js继承
May 20 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
Jquery 全选反选实例代码
Nov 19 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 #Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 #Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 #Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 #Javascript
详解vue 数组和对象渲染问题
Sep 21 #Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 #Javascript
Puppeteer环境搭建的详细步骤
Sep 21 #Javascript
You might like
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
Firefox outerHTML实现代码
2009/06/04 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
2019/06/17 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
会计系个人求职信范文分享
2013/12/20 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
中秋节感想
2015/08/10 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
教你使用TensorFlow2识别验证码
2021/06/11 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android