清除vue的keep-alive的页面内指定页面的缓存

本文探讨了在Vue中使用keep-alive实现页面切换时数据保留的问题,如何通过beforeRouteLeave钩子函数清除特定页面缓存,并介绍了在main.js中添加混入以全局管理缓存的方法。

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

1.需求背景

自定义页面的tab 类似chrome浏览器的标签页页,如图

切换要求为

1、打开的页面切换要保留页面上的数据如:页面的搜索条件选项和表格数据等。

2、关闭页面再打开时需要重新加载页面。

2.出现问题

 使用keep-alive 缓存子页面,确实可以达到 需求 1 的要求,但是关闭了这个页面在打开的话页面缓存依然存在。

3.解决方案

1.查找了keep-alive的清除缓存的方案,发现官方并没有提供相关方法。所以先想到的是,重新打开页面链接后面增加一个随机数的参数。但是需要区分链接从哪打开的,以及是否新打开标签页等逻辑判断,故放弃此方案,继续寻找keep-alive的清除缓存的方案。

2.在页面里可以获取到,注意 !!! ( 这两个参数 只能在路由的钩子函数里获取到)

let cache = this.$vnode.parent.componentInstance.cache // 缓存的组件
let keys = this.$vnode.parent.componentInstance.keys // 缓存的组件名

所以这个处理放到了 beforeRouteLeave 函数里,当页面离开是  判断是通过点击关闭按钮离开的,然后清楚这个页面的缓存。

另一个问题:需要在每个页面增加 beforeRouteLeave。所以在main.js 里加了混入

具体代码如下(删除了业务相关逻辑)

Vue.mixin({
    beforeRouteLeave(to, from, next) {
        // 存在关闭key 则清除缓存
        let key = targetClosePath
        let cache = this.$vnode.parent.componentInstance.cache // 缓存的组件
        let keys = this.$vnode.parent.componentInstance.keys // 缓存的组件名
        if (cache[key] !== null) {
            delete cache[key]
            let index = keys.indexOf(key)
            if (index > -1) {
               keys.splice(index, 1)
            }
        }
        next()
    }
})

### 使用 Vue 的 `keep-alive` 组件缓存特定页面 #### 配置 `keep-alive` 实现高效组件管理 为了提高单页应用程序(SPA)中的性能并减少必要的重新渲染,Vue 提供了 `<keep-alive>` 标签用于包裹动态组件,在组件切换时自动保存进入缓存的状态。当再次访问被缓存的视图时,可以快速恢复之前的状态而重新加载整个组件实例。 针对仅需缓存部分而非全部子路由的情况,可以通过设置 `include` 或者 `exclude` 属性来精确控制哪些组件应该被保留于内存之中[^1]: ```html <keep-alive :include="['listPage']"> <router-view></router-view> </keep-alive> ``` 上述代码片段展示了如何利用 `include` 参数指定名称为 `'listPage'` 的组件作为唯一允许缓存的对象;而其他未提及的名字则会受到此标签的影响,每次导航至这些路径都会创建新的实例[^2]。 #### 动态调整缓存策略适应同需求 除了静态定义外,还可以通过绑定属性的方式使缓存名单变得灵活多变。例如依据当前用户的操作习惯或是业务逻辑的变化实时增删项名,从而达到更精细化的操作效果: ```javascript data() { return { cachedPages: ['home', 'about'] } } // ... <keep-alive :include="cachedPages"> <!-- ... --> </keep-alive> ``` 这种方法使得开发者能够在运行期间根据实际情况修改要保持活动状态的具体范围,增强了灵活性的同时也提高了资源利用率[^3]。 #### 处理缓存带来的副作用 值得注意的是,启用 `keep-alive` 后可能会遇到一些意想到的问题,比如某些情况下即使离开了某个页面再回来其内部的数据也没有刷新等问题。为了避免这种情况发生,可以在激活钩子里手动触发数据获取动作,确保显示的内容是最新的版本[^4]: ```javascript activated() { this.fetchData(); }, deactivated() { console.log('Component deactivated'); } ``` 以上就是在 Vue.js 中运用 `keep-alive` 来优化 SPA 性能以及解决潜在问题的一些最佳实践建议。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值