发表于 2024年9月11日1年前 有这样的需求，页面组件开启 keepAlive 之后，通过关闭标签页关闭页面成功后，再进入开启缓存的页面发现那个页面依旧是缓存的状态，这就存在问题了，看了网上别的解决方案也没发现更好的，所以就想投机取巧一下。 既然 keepAlive 组件有一个 exclude 以及 include 状态，所以可以通过动态添加组件的 exclude 来控制。 ```template <keep-alive :exclude="cachedComponents"> <router-view v-if="$route.meta.keepAlive" class="avue-view"/> </keep-alive> ``` ```js removeComponentFromCache(componentName) { this.cachedComponents.push(componentName); this.cachedComponents = this._.uniq(this.cachedComponents) }, addComponentFromCache(componentName) { const index = this.cachedComponents.indexOf(componentName); if (index !== -1) { this.cachedComponents.splice(index, 1); } }, ``` 然后通过动态的去调用这俩方法就可以达到关闭标签页的同时把组件缓存清空，当进入页面的时候再添加到 include 中，再继续缓存组件，亲测好用。大家有啥好办法也可以分享一下啊
有这样的需求，页面组件开启 keepAlive 之后，通过关闭标签页关闭页面成功后，再进入开启缓存的页面发现那个页面依旧是缓存的状态，这就存在问题了，看了网上别的解决方案也没发现更好的，所以就想投机取巧一下。 既然 keepAlive 组件有一个 exclude 以及 include 状态，所以可以通过动态添加组件的 exclude 来控制。