vue-element-admin——<keep-alive>不符合预期缓存的原因

vue-element-admin------<keep-alive>不符合预期缓存的原因

本文章,以现在中后台开发用的非常多的开源项目vue-element-admin为案例。首先,列出官方文档与缓存<keep-alive>相关的链接(请认真阅读,出现缓存<keep-alive>不符合预期,大部分原因就是未认真阅读官方文档或者对<keep-alive>不熟悉)。然后,本文章将总结出"不符合预期缓存的可能原因",即"<keep-alive>不生效,不进行缓存的原因"。

1. vue-element-admin提及路由和keep-alive相关的地方

2.导致<keep-alive>不符合预期的可能原因

① 路由配置上,"name"属性配置不对

比如,在router.js配置的一个路由的name为"dashboard",而组件的name属性为"Dashboard"。如下图,未缓存。


应该改为一致:在router.js配置改为和组件的name属性一致,改为"Dashboard"。如下图,缓存成功。


对应该文章的前面的1.11.2

② 组件自身的 name 选项未写

由于组件自身的 name 选项未写,**include**匹配不到组件自身的 name 选项,同样未缓存成功。

对应该文章的前面的1.11.2

③ 多级目录(嵌套路由)导致

如果按照文章的前面的1.3 新增页面------多级目录(嵌套路由) | vue-element-admin (panjiachen.github.io),这种官方文档的三级目录(或以上)的路由写法。

然后,在已在对应组件上,加上和router配置一样的name属性,即解决本文章的2.①和2.②

<keep-alive>是不能缓存的Menu1-1 、Menu1-3、Menu1-2-1和Menu1-2-2的,而Menu2(二级目录)缓存了。


可以看看,vue2官网对keep-alive的介绍。

3.总结

vue-element-admin------缓存不符合预期的原因:
① 路由配置上,"name" 属性配置不对,和组件的 name 不一致
② 路由对应的组件自身的 name 选项未写
③ 多级目录(嵌套路由)导致,三级和三级以上不能缓存

建议多看看官方文档,避免"不规范使用<keep-alive>,导致<keep-alive>不符合预期"

欢迎阅读一下,个人写的一篇文章------"vue-element-admin的三级目录(或以上)<keep-alive>不缓存的解决方法"。

相关推荐
IT_陈寒9 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端9 小时前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家10 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞10 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手10 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞10 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor10 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i10 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor10 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫
银河技术10 小时前
Redis 限流最佳实践:令牌桶与滑动窗口全流程实现
数据库·redis·缓存