不起作用是因为Saber里keepAlive这块写的有问题。
src/page/index/layout.vue和src/page/index/index.vue中的include的值都是$store.getters.tagsKeep
找到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这块的代码，怎么配置基本都没用。
加载中...
苏公网安备 32041102000998号