一、该问题的重现步骤是什么？
如何在自定义页面中，切换tab保持缓存，不刷新页面
添加了keepAlive 不起作用，vue页面还需要添加东西吗？
另外提一个建议，社区的列表问题点击能不能修改为在新页面打开，如果搜索问题的话，本页面打开，发现不是想要的，还要返回找下一个问题，不太方便
三、你正在使用的是什么产品，什么版本？在什么操作系统上？
4.5.0
Saber3
不起作用是因为Saber里keepAlive这块写的有问题。
src/page/index/layout.vue和src/page/index/index.vue中<keep-alive>的include的值都是$store.getters.tagsKeep
<template>
<router-view #="{ Component }">
<keep-alive :include="$store.getters.tagsKeep">
<component :is="Component" />
</keep-alive>
</router-view>
</template>找到src\store\getters.js，你会发现tagsKeep的值最终获取到的是所有当前打开标签页的路由fullpath数组
tagsKeep: (state, getters) => {
return getters.tagList
.filter(ele => {
return (ele.meta || {}).keepAlive
})
.map(ele => ele.fullPath)
}你再看vue3官网文档和关于keepAlive的源码里对include的处理，会发现传入路由fullpath数组去匹配页面组件的name值，几乎都会返回false
官网原话：
它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，
就必须显式声明一个 name 选项。部分源码：
function pruneCache(filter: (name: string) => boolean) {
cache.forEach((vnode, key) => {
const name = getComponentName(vnode.type as ConcreteComponent)
if (name && !filter(name)) {
pruneCacheEntry(key)
}
})
}
// prune cache on include/exclude prop change
watch(
() => [props.include, props.exclude],
([include, exclude]) => {
include && pruneCache(name => matches(include, name))
exclude && pruneCache(name => !matches(exclude, name))
},
// prune post-render after `current` has been updated
{ flush: 'post', deep: true },
)
function matches(pattern: MatchPattern, name: string): boolean {
if (isArray(pattern)) {
return pattern.some((p: string | RegExp) => matches(p, name))
} else if (isString(pattern)) {
return pattern.split(',').includes(name)
} else if (isRegExp(pattern)) {
pattern.lastIndex = 0
return pattern.test(name)
}
/* v8 ignore next */
return false
}故此，只要不改saber里keepAlive这块的代码，怎么配置基本都没用。
参考这几个试试
跟这个不一样的，我要实现的就是form 表单里不刷新，跟在菜单管理里配置的是否缓存效果一样就可以了，
录入信息的时候我可能会切换tab，保证我返回tab的时候录入数据还在。
我项目中没有你这个案例
已解决，感谢
https://sns.bladex.cn/q-14311.html
扫一扫访问 Blade技术社区 移动端
加载中...
苏公网安备 32041102000998号