Vue 全站缓存之 keep-alive ：强制动态移除缓存

最新推荐文章于 2025-05-17 17:32:58 发布

前端爱好者_ss

最新推荐文章于 2025-05-17 17:32:58 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_40425232/article/details/88852125

本文介绍如何在Vue中针对特定页面名称强制动态移除keep-alive的缓存，通过操纵cache实现缓存组件的智能管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

keep-alive 默认不支持动态销毁已缓存的组件，所以此处给出的解决方案是通过直接操控 keep-alvie 组件里的 cahce 列表，暴力移除缓存：

//使用Vue.mixin的方法拦截了路由离开事件，并在该拦截方法中实现了销毁页面缓存的功能。
Vue.mixin({
   
   
    beforeRouteLeave:function(to, from, next){
   
   
        if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
        {
   
   //此处判断是如果返回上一层，你可以根据自己的业务更改此处的判断逻辑，酌情决定是否摧毁本层缓存。
            if (this.$vnode && this.$vnode.data.keepAlive)
            {
   
   
                if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
                {
   
   
                    if (this.$vnode.componentOptions)
                    {
   
   
                        var key = this.$vnode.key == null
                                    ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${
    
    this.$vnode.componentOptions.tag}` : '')
                                    : this.$vnode.key;
                        var cache = this.$vnode.parent.componentInstance.cache;