Vue中keep-alive使用详解,实现页面缓存

使用的场景

在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载
比如:根据条件查询列表显示的数据中,进入到第二个页面查看详细信息,然后返回,这种情况下列表页面会重新加载,之前输入的条件也不见了,这样操作的话如果还想看之前的搜索条件数据还需要再输入一次,用户体验很不好,此时就许哟啊对列表页进行缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。

keep-alive基本组成

<keep-alive> 内置组件,将需要缓存的组件包裹起来
activateddeactivated<keep-alive> 包裹的组件时新增的两个生命周期函数
includeexclude<keep-alive>中的两个属性实现有条件的进行缓存。include包含的组件会被进行缓存,exclude包含的组件不会被缓存。

使用

实现路由页面缓存有两种如下两种方式:

1.使用includeexclude控制组件是否缓存

首先在 home.vue 页面中添加<keep-alive>组件
要缓存的路由组件必须设置name属性,跟cashViews中的值对应;

// home.vue
<template>
 <div>
   ...
  <keep-alive :include='cashViews'>
    <router-view></router-view>
  </keep-alive>
 </div>
</template>  
<script>
  export default{
    data() {
      return {
        // 要缓存的组件
        cashViews: ['list']
      }
    }
  }
</script>    

beforeRouteEnter 在组件内路由守卫钩子函数中处理逻辑

// list.vue
<script>
	export default{
		// 在组件内路由守卫钩子函数中处理逻辑
		beforeRouteEnter (to, from, next) {
			if (from.name === 'Index') { // 处理页面缓存后,返回首页再次进入缓存页时数据为更新
				// 该生命周期无法获取到this,因此把vm实例当作参数传递
				next(vm => {
					vm.pages.pageNum = 1
					vm.getQueryList()
				})
			}
		}
	}
</script>

如果查询表单不是动态获取的,是页面写死的,可以在activated钩子中调用查询列表数据方法。

activated() {
   this.getTableDatas()
  },

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

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

2.利用meta属性,根据v-if控制显示的router-view

在路由表routes中配置meta属性,新增keepAlive属性,需要缓存的页面设置keepAlivetrue.
meta是给每个路由添加一个自定义的对象,对象中可以设置一些状态,来进行一些操作)

{
  path: '/list',
  name: 'List',
  component: List,
  meta: {
    keepAlive: true
  }
}

根据当前访问路由的keepAlive值控制是否缓存组件

//home.vue
<keep-alive>
	<!--这里是会被缓存的组件-->
	<router-view v-if="this.$route.meta.keepAlive"></router-view>
</keep-alive>
<!--这里是不会被缓存的组件-->
<router-view v-if="!$route.meta.keepAlive"></router-view>

在组件的守卫钩子中修改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()
  }
}
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页