本文介绍了在Vue项目中使用KeepAlive组件遇到的问题，如表单提交后缓存清除问题。作者提供了通过路由守卫动态控制KeepAlive属性的解决方案，并给出实践代码示例，强调了理解和学习相关JS知识点的重要性。
默认KeepAlive已熟悉 , 不熟悉的可以看下官网。
KeepAlive 推荐使用include和 exclude 添加和移除缓存组件，需要Vuex的配合，我们项目比较小，没有需求大量使用Vuex，集成过于冗余。
KeepAlive存在问题：提交完表单之后，下一次提交的时候，如何删除上一次缓存问题。
解决方案（尝试）：
-
通过路由守卫动态修改KeepAlive属性，结果下次进来页面还是被缓存了。 ------- 【X】
-
提交表单的时候，销毁页面，下次进入的时候缓存还在。 ------- 【X】
-
找到Cache，删除指定缓存页面。参考查看----【✔️】
总结：尝试了几种方案，问题点是在于，删除缓存，下次不会显示，第三种可行。
伪代码：
路由守卫离开函数{
if 离开去缓存的页面 {
本页面keepAlive 打开
}else{
销毁这次缓存
}
}
路由守卫进入函数{
打开本页面的keepAlive
}
注意：因为上次离开的时候，删除了缓存，keepAlive 属性进来的时候还需要更改。
实践代码：
beforeRouteLeave (to, from, next) {
if (to.name === “agree”) {
from.meta.keepAlive = true
console.log(from.meta.keepAlive)
} else {
if (this.KaTeX parse error: Expected 'EOF', got '&' at position 7: vnode &̲& this.vnode.data.keepAlive) {
if (this.KaTeX parse error: Expected 'EOF', got '&' at position 14: vnode.parent &̲& this.vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
if (this.$vnode.componentOptions) {
var key = this.$vnode.key == null
-
? this.
v
n
o
d
e
.
c
o
m
p
o
n
e
n
t
O
p
t
i
o
n
s
.
C
t
o
r
.
c
i
d
+
(
t
h
i
s
.
vnode.componentOptions.Ctor.cid + (this.
vnode.componentOptions.Ctor.cid+(this.vnode.componentOptions.tag ?
- this.$vnode.key;
::${this.$vnode.componentOptions.tag} : ‘’)
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key]) {
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
}
}
}
}
this.$destroy();
}
next();
},
beforeRouteEnter (to, from, next) {
if (to.name === “enterpriseApply”) {
to.meta.keepAlive = true
JavaScript 和 ES6
在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。
扫一扫
2042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
