Vue-Router实现前端页面缓存

2019-07-10  本文已影响0人  桃花谷主V

一、使用情景

在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业务场景下,
比如:

以上两种情景都会带来很不好的用户体验。此时,就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。

二、keep-alive基本认识

三、keep-alive实现路由页面缓存

通过keep-alive实现路由页面缓存有两种如下两种方式:

(一)、使用include控制需要缓存的页面

// home.vue
<template>
 <div>
   ...
  <keep-alive :include='cashViews'>
    <router-view></router-view>
  </keep-alive>
 </div>
</template>  
<script>
  export default{
    data() {
      return {
        // 要缓存的组件
        cashViews: ['list']
      }
    }
  }
</script>    
// list.vue
<script>
  export default{
    // 在组件内路由守卫钩子函数中处理逻辑
    beforeRouteEnter (to, from, next) {
      if (from.name === 'Index') { // 处理页面缓存后,返回首页再次进入缓存页时数据为更新
        // 该生命周期无法获取到this,因此把vm实例当作参数传递
        next(vm => {
          vm.pages.pageNum = 1
          // 因为我这里查询表单是动态的,所以首页进入时需要调用一次,在改方法中请求返回后调用了获取列表数据getTableDatas方法
          vm.getQueryList()
        })
      } else if (!from.name) { // 处理刷新页面时,获取动态表单方法未执行,导致表单无法加载
        next(vm => {
          vm.getQueryList()
        })
      } else {
        // 详情返回时只更新列表数据,因为如果在详情页面做了操作,列表数据状态会改变,其他使用缓存
        next(vm => {
          vm.getTableDatas()
        })
      }
    }
  }
</script>

以上实现,是针对我自己项目业务场景的实现,如果查询表单不是动态获取的,是页面写死的,可以在activated钩子中调用查询列表数据方法。这样每次进入的缓存页面的时候,只会更新列表数据,不会改变其他缓存。

问题:同样会存在,列表缓存数据后,返回首页,再次进入列表页面,缓存数据还在,这样可以在路由守卫beforeRouterLeave钩子中处理。

  activated() {
   this.getTableDatas()
  },
  beforeRouterLeave(to, from, next) {
  if (from.name === 'Index') {
    // 如果从首页进入时调用重置方法
    this.reset()
  }
}

(二)、根据v-if控制显示的router-view

  1. 在路由表routes中配置meta属性,新增keepAlive属性,需要缓存的页面设置keepAlivetrue.
{
  path: '/list',
  name: 'List',
  component: List,
  meta: {
    keepAlive: true
  }
}
  1. 根据当前访问路由的keepAlive值控制是否缓存组件
// home.vue
<template>
  ...
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"></router-view>
</template>
  1. 在组件的守卫钩子中修改keepAlive的值,控制页面缓存与否
// List.vue
export default {
  /* 从List组件离开时,修改keepAlive值为false,保证进入该页面时页面刷新
  */
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  }
}
// Detail.vue
export default {
  /*从Detail返回List时,修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面
  */
  beforeRouteLeave(to, from, next){
    if(to.name === 'List') {
      to.meta.keepAlive = true
    }
    next()
  }
}
上一篇下一篇

猜你喜欢

热点阅读