vue页面缓存失效问题解决

吴迪98

于 2023-06-09 13:06:22 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：项目实战 vue知识文章标签： vue.js 缓存 javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_43606158/article/details/131125267

项目实战同时被 2 个专栏收录

39 篇文章

订阅专栏

11 篇文章

订阅专栏

文章讲述了在使用Vue的前端项目中，遇到keep-alive组件缓存失效的问题。问题源于组件name的错误或缺失。通过查阅文档，确定问题在于组件匹配name的规则。解决方案包括删除不必要的name声明（针对Vue3.2.34+版本）或确保组件name的正确性。开发者可以通过调试显示正确的name来辅助排查。

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

文章目录

一、问题背景
二、问题排查
三、问题解决

一、问题背景

前端技术栈用的是vue，然后用keep-alive组件进行缓存页面【切换页面不进行刷新页面，保留之前的查询条件及状态等等】

测试提bug：部分页面突然缓存失效了，每次切换都会触发页面重载

二、问题排查

翻看文档：https://cn.vuejs.org/guide/built-ins/keep-alive.html#include-exclude

重点是这俩段话：
在这里插入图片描述
它是根据组件的name进行匹配的，如果是3.2.34+的版本就无需给组件声明name。
所以到这里基本上就排查到了问题应该就是组件的name错了所以导致缓存无效了。

三、问题解决

方案一：直接删除name的声明【一定是vue3.2.34+的版本才可以用这个方法】

方案二：将组件的name改成正确的。
在这里插入图片描述

如果你不知道什么是正确的name的话可以在keep-alive那里把name显示的debug出来看

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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