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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
jquery表格内容筛选实现思路及代码
Apr 16 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 Javascript
Element中Slider滑块的具体使用
Jul 29 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类
2006/10/09 PHP
JS控制表格隔行变色
2006/06/26 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
JavaScript ES6的新特性使用新方法定义Class
2016/06/28 Javascript
ionic实现滑动的三种方式
2016/08/27 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
办公室秘书岗位职责范本
2014/02/11 职场文书
2014年元旦活动方案
2014/02/15 职场文书
报关报检委托书
2014/04/08 职场文书
培训研修方案
2014/06/06 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
关于教师节的广播稿
2014/09/10 职场文书
学雷锋日活动总结
2015/02/06 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
党员读书活动心得体会
2016/01/14 职场文书
新员工入职感言范文!
2019/07/04 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python