vue 使某个组件不被 keep-alive 缓存的方法

开发需求

1. 动态展示系统首页所有的结构
2. 点击日期查询对应的数据 点击数据跳转对应的页面 然后 返回上一页时 “要求保留跳转之前的日期数据状态”
3. 只针对系统首页进行数据缓存

使用 vue内置组件 keep-alive 进行缓存 从而实现想要的功能

出现的问题

1. 使用keep-alive 包裹的路由 会对所有的页面进行缓存 任然保留上一次的数据 与开发需求不符
2. 因为缓存的原因 没有走到 页面销毁的钩子函数 ‘deactivated’

官网给出的解析

“ keep-alive” 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 当组件在keep-alive 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行

通过include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

include - 字符串或正则表达式。只有匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

实际开发解决方案

第一种

可以在不想进行缓存的组件中，可以添加该方法来设置组件不被keep-alive进行缓存:
原理是 在路由跳转之前 对页面进行销毁 清除缓存 实现下次进来时页面数据从新加载

<template>
    <div>
         不需要进行缓存的页面
    </div>
</template>
<script>
export default {
    data() {
		return {
		
		}
    },
    methods:{
       
    },
    // 添加这一行 可以保证组件不被keep-alive进行缓存
    deactivated() {
        this.$destroy();
    }
}
</script>
<style  scoped>

</style>

第二种

使用官网给出的方法 通过 include 设定组件有条件地缓存（可以选择性的缓存）

<keep-alive :include="routerName">
     <router-view />
</keep-alive>

data(){
  return {
  //设置需要缓存组件名字
    routerName: {
      'homePage' // 组件名称
    }
  }
}

在想要缓存的组件中 定义该名字 （一定要写）

<template>
    <div>
        需要进行缓存的页面
    </div>
</template>
<script>
export default {
	// name的名称要和 include 字符要一直 才能达到缓存的效果
    name:'homePage',
    data() {
        return {
			
        };
    },
    methods:{
       
    }
}
</script>
<style  scoped>

</style>