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

2018年07月07日 11:58:40 大灰狼的小绵羊哥哥 阅读数:4492
 

vue中,我们所要实现的一个场景就是:

1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据,

2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置。

最近在项目中遇到这个问题,思考了几套方案,总是不太完善。百度搜到的方案也基本都只能满足一些很简单的需求。对于复杂一些的情况,还是有些不完善的地方。以下是个人对于这种场景的一个摸索,也参考了百度。如有更好的方案,欢迎指出。

  • 缓存组件,vue2中提供了keep-alive。首先在我们的app.vue中定义keep-alive:
  1.  
    <keep-alive>
  2.  
    <router-view v-if="$route.meta.keepAlive"/>
  3.  
    </keep-alive>
  4.  
    <router-view v-if="!$route.meta.keepAlive"/>

这里是根据路由中的meta源信息中的keepAlive字段来判断当前路由组件是否需要缓存。这里的meta的keepAlive是我们自定义的,当然你也可以叫别的名字。

下面在router/index.js即我们的路由文件中,定义meta信息:

  1.  
    // list是我们的搜索结果页面
  2.  
    {
  3.  
    path: '/list',
  4.  
    name: 'List',
  5.  
    component: resolve => require(['@/pages/list'], resolve),
  6.  
    meta: {
  7.  
    isUseCache: false, // 这个字段的意思稍后再说
  8.  
    keepAlive: true // 通过此字段判断是否需要缓存当前组件
  9.  
    }
  10.  
    },

上面的component: resolve => require(['@/pages/list'], resolve)这里的组件引入方式可能和大家平时写的有些不一样,这里是为了路由的懒加载用的,大家可以忽略。按照正常的import引入也可以,这个和本次的主题无关。如此一来,vue的路由会帮我们去缓存list页面。

  • 刷新数据or缓存数据的实现:

说这之前,先简单说一下和缓存相关的vue钩子函数。

设置了keepAlive缓存的组件:

第一次进入:beforeRouterEnter ->created->…->activated->…->deactivated

后续进入时:beforeRouterEnter ->activated->deactivated

可以看出,只有第一次进入该组件时,才会走created钩子,而需要缓存的组件中activated是每次都会走的钩子函数。所以,我们要在这个钩子里面去判断,当前组件是需要使用缓存的数据还是重新刷新获取数据。思路有了,下面我们来实现:

  1.  
    // list组价的activated钩子
  2.  
    activated() {
  3.  
    // isUseCache为false时才重新刷新获取数据
  4.  
    // 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的
  5.  
    if(!this.$route.meta.isUseCache){
  6.  
    this.list = []; // 清空原有数据
  7.  
    this.onLoad(); // 这是我们获取数据的函数
  8.  
    }
  9.  
    },

这里的isUseCache 其实就是我们用来判断是否需要使用缓存数据的字段,我们在list的路由的meta中已经默认设置为false,所以第一次进入list时是获取数据的。

当我们从详情页返回时,我们把list页面路由的isUseCache设置成true,这样我们在返回list页面时会使用缓存数据:

  1.  
    // 详情页面的beforeRouteLeave钩子函数
  2.  
    beforeRouteLeave (to, from, next) {
  3.  
    if (to.name == 'List') {
  4.  
    to.meta.isUseCache = true;
  5.  
    }
  6.  
    next();
  7.  
    },

我们这里是在即将离开detail页面前判断是否返回的列表页。如果是返回list页面,则把list页面路由的isUseCache字段设置成true。为什么这样设置呢?因为我们对list组件使用的keep-alive进行缓存组件,其默认就是使用缓存的。而我们又在list组件的actived钩子函数中进行了判断:只有在list页面的isUseCache==false时才会清空原有数据并重新获取数据。所以此处设置isUseCache为true,此时返会list页面是不会重新获取数据的,而是使用的缓存数据。

detail返回list可以缓存数据了,那么search前往list页面时怎么让list页面不使用缓存数据而是获取新数据呢?我们重新回到list的activated钩子中:

  1.  
    // list组价的activated钩子
  2.  
    activated() {
  3.  
    // isUseCache为false时才重新刷新获取数据
  4.  
    // 因为对list使用keep-alive来缓存组件,所以默认是会使用缓存数据的
  5.  
    if(!this.$route.meta.isUseCache){
  6.  
    this.list = []; // 清空原有数据
  7.  
    this.onLoad(); // 这是我们获取数据的函数
  8.  
    this.$route.meta.isUseCache = false; }
  9.  
    },

我们加了一行this.$route.meta.isUseCache=false;也就是从detail返回list后,将list的isUseCache字段为false,而从detail返回list前,我们设置了list的isUseCache为true。所以,只有从detail返回list才使用缓存数据,而其他页面进入list是重新刷新数据的。

至此,一个前进刷新、后退返回的功能基本完成了。

如果场景再复杂一丢丢,比如,如果这个详情页是个订单详情,那么在订单详情页可能会有删除订单的操作。那么删除订单操作后会返回订单列表页,是需要列表页重新刷新的。那么我们需要此时在订单详情页进行是否要刷新的判断。简单改造一下详情页:

  1.  
    data () {
  2.  
    return {
  3.  
    isDel: false // 是否进行了删除订单的操作
  4.  
    }
  5.  
    },
  6.  
    beforeRouteLeave (to, from, next) {
  7.  
    if (to.name == 'List') {
  8.  
    // 根据是否删除了订单的状态,进行判断list是否需要使用缓存数据
  9.  
    to.meta.isUseCache = !this.isDel;
  10.  
    }
  11.  
    next();
  12.  
    },
  13.  
    methods: {
  14.  
    deleteOrder () {
  15.  
    // 这里是一些删除订单的操作
  16.  
     
  17.  
    // 将状态变为已删除订单
  18.  
    // 所以beforeRouteLeave钩子中就会将list组件路由的isUseCache设置为false
  19.  
    // 所以此时再返回list时,list是会重新刷新数据的
  20.  
    this.isDel = true;
  21.  
    this.$router.go(-1)
  22.  
    }
  23.  
    }

至此,算是解决了我的vue项目中的这个前进刷新、后退缓存数据和浏览位置的问题。

最后再提一下,页面滚动位置的问题。

问题1:我们知道,在vue这种单页应用中,如果你在a页面滚动了一段距离后,此时前往b页面后,b页面也会停留在a页面的滚动位置。这个问题的解决,我们可以利用router本身提供的功能来解决:

  1.  
    routes: [
  2.  
    {
  3.  
    path: '/detail',
  4.  
    name: 'Detail',
  5.  
    component: resolve => require(['@/pages/detail'], resolve)
  6.  
    }
  7.  
    ],
  8.  
    scrollBehavior (to, from, savedPosition) {
  9.  
    if (savedPosition) {
  10.  
    return savedPosition
  11.  
    } else {
  12.  
    if (from.meta.keepAlive) {
  13.  
    from.meta.savedPosition = document.body.scrollTop;
  14.  
    }
  15.  
    return { x: 0, y: to.meta.savedPosition || 0 }
  16.  
    }
  17.  
    }

scrollBehavior是路由提供的基础功能,这段函数写的是:

1.如果通过浏览器自带的前进后退按钮切换的路由,那么会自动使用浏览默认的回滚上次页面的浏览位置。

2.如果是通过vue路由进行的页面切换。例如a前往b,首先判断a是不是通过keep-alive缓存的组件,如果是,则在a路由的meta中添加一个savedPosition字段,并且值为a的滚动位置。最后return的是页面需要回滚的位置。如此一来,如果打开一个页面,该页面的组件路由中meta.savedPosition为undefined的话,则页面滚动到(0,0)的位置,这样解决了问题1。那么如果打开一个页面,它的路由的meta.savedPosition有值的话,则滚动到上次浏览的位置,因为meta.savedPosition保存的就是上次浏览的位置。

如果觉得有帮助的话,就收藏一下吧!

作者:chinaBerg
链接:https://juejin.im/post/5b2ce07ce51d45588a7dbf76
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践的更多相关文章

  1. vue项目实现详情页后退缓存之前的数据

    vue项目实现详情页后退缓存之前的数据 2019年02月19日 14:54:57 不想写代码的程序员 阅读数:244   一.需要缓存的内容: 1.后退缓存条件查询的数据 2.后退缓存分页信息 二.实 ...

  2. iOS开发:一个高仿美团的团购ipad客户端的设计和实现(功能:根据拼音进行检索并展示数据,离线缓存团购数据,浏览记录与收藏记录的批量删除等)

    大致花了一个月时间,利用各种空闲时间,将这个客户端实现了,在这里主要是想记录下,设计的大体思路以及实现过程中遇到的坑...... 这个项目的github地址:https://github.com/wz ...

  3. 在Asp.NET Core中如何优雅的管理用户机密数据

    在Asp.NET Core中如何优雅的管理用户机密数据 背景 回顾 在软件开发过程中,使用配置文件来管理某些对应用程序运行中需要使用的参数是常见的作法.在早期VB/VB.NET时代,经常使用.ini文 ...

  4. vue中使用keepAlive组件缓存遇到的坑

    项目开发中在用户由分类页category进入detail需保存用户状态,查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 上一篇讲了keep-alive的基本用法,现在说说遇到 ...

  5. 学习Acegi应用到实际项目中(7)- 缓存用户信息

    在默认情况下,即在用户未提供自身配置文件ehcache.xml或ehcache-failsafe.xml时,EhCache会依据其自身Jar存档包含的ehcache-failsafe.xml文件所定制 ...

  6. vue中如何刷新页面

    vue中刷新页面的方法 1. 不能使用 this.$router.go(0) 或者 window.reload() 不起作用还特别恶心 这个才是有效果的刷新页面,只要照图敲,就能有效果 我们在 app ...

  7. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  8. Vue中如何使用axios请求跨域数据

    1.axios不支持jsonp,因为axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净: 2.在使用axios发送请求时,服务器端设置 res.header("Access- ...

  9. 解决Vue中文本输入框v-model双向绑定后数据不显示的问题

    前言 项目中遇到一个问题就是在Vue中双向绑定对象属性时,手动赋值属性后输入框的数据不实时更新的问题. <FormItem label="地址" prop="eve ...

随机推荐

  1. 虚拟局域网VLAN的Packet tracer实验

    ICMP的广播请求 Create PDU pc1发向交换机 交换机的其余端口向外发送该广播 ------------------------------------------------------ ...

  2. python中int是什么类型

    python中的基本数据类型 1:虽然python中的变量不需要声明,但使用时必须赋值整形变量浮点型变量字符型2:可以一个给多个变量赋值,也可以多个给多个变量赋值3:python3中有6个标准数据类型 ...

  3. Python利用PIL将数值矩阵转化为图像

    要求:输入一个n*n的矩阵,矩阵包括从-1到1的浮点数,将其转化为可视化图像 调库 from PIL import Image import numpy as np import math 载入图像, ...

  4. 复习最短路 spfa+dijstra堆优化

    题目很简单,, 但是wa了三次,, 用<vector>之前一定要记得clear()...简单说下 spfa的问题 和bell_forman有点类似 每次取出一个点 然后更新 并把更新了的节 ...

  5. css鼠标悬浮控制元素隐藏与显示

    在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图 当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...

  6. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

  7. C# 7.0 语法

    C# 7.0的语法主要是优化了之前的写法,使得更加简洁方便.try catch when  这个使用场景很少,正常的开发无业务处理的时候不建议使用 . #region 2.字符串嵌入值 Console ...

  8. 【原创】大叔经验分享(79)mysql内存设置

    mysql内存设置,首先要知道当前的设置 MySQL [(none)]> show variables like '%buffer%'; +--------------------------- ...

  9. Vector , list 和 deque的区别

     vector   表示一段连续的内存区域,每个元素被顺序存储在这段内存中,对vector   的随机访问效率很高,但对非末尾元素的插入和删除则效率非常低.  deque    也表示一段连续的内存区 ...

  10. JS-闭包练习

    首先,第一个输出,因为前置运算,i要先参与输出,然后再自增,所以输出为0 第二个输出,因为f1和f2是不同的函数,不共享i变量,所以输出也为0 第三个输出,因为是f1,共享i,所以i加了1,输出为1 ...