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>不缓存的解决方法"。

相关推荐
xier12345618 分钟前
高性能和高灵活度的react表格组件
前端
你打不到我呢20 分钟前
nestjs入门:上手数据库与prisma
前端
多啦C梦a21 分钟前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森27 分钟前
乐观更新
前端·react.js·设计模式
笔尖的记忆34 分钟前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin88842 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
lichenyang4531 小时前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
用户841794814561 小时前
vxe-table 实现列头授权自定义插槽模板,自定义输入框
前端
im_AMBER1 小时前
Web 开发 24
前端·笔记·git·学习