• wordpress CMS主题:ssmay主题 wordpress CMS主题:ssmay主题
  • 首页 > 前端开发 > vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践

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

    作者: 分类:前端开发 点击: 1,005 次
    wordpress CMS主题:ssmay主题

      扫描下面的二维码,“关注”我的百家号。

      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时是获取数据的。

      由于我们只要列表到详情页的时候缓存列表页的数据,所以我们要在列表页的beforeRouteLeave的钩子判断,如果前往的是详情页面,则缓存数据:

      // 列表页面的beforeRouteLeave钩子函数
      beforeRouteLeave (to, from, next) {        
          if (to.name == 'Detail') {
              from.meta.isUseCache = true;    
          }        
          next();
      },

      现在,detail返回list页面。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保存的就是上次浏览的位置。

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



      欢迎“关注”我的百家号。

      头条二维码
      加入我的QQ群
      头条二维码
      关注我的百家号

    文章作者:sunny
    本文地址:http://wanlimm.com/77202006218360.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    您的电子邮箱地址不会被公开。 必填项已用*标注

    此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据