开发需求
- 动态展示系统首页所有的结构
- 点击日期查询对应的数据 点击数据跳转对应的页面 然后 返回上一页时 “要求保留跳转之前的日期数据状态”
- 只针对系统首页进行数据缓存
使用 vue内置组件 keep-alive 进行缓存 从而实现想要的功能
出现的问题
- 使用keep-alive 包裹的路由 会对所有的页面进行缓存 任然保留上一次的数据 与开发需求不符
- 因为缓存的原因 没有走到 页面销毁的钩子函数 ‘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>