本文主要是介绍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相关的地方
-
1.1 路由和侧边栏 | vue-element-admin (panjiachen.github.io)
个人觉得,官方文档这里的“配置项”下的"name"属性,其注释应该更详细一些(官方文档这里也描述了,但官网放在了其他目录下了,个人觉得这里应该提示一下),如下:
/*** 应该和路由对应的 view component 属性的组件 "name" 属性保持一致,* 这样, <keep-alive> 的 include 属性就可匹配组件自身的 name 选项*/ name: 'router-name' // 设定路由的名字,一定要填写不然使用<keep-alive>时会出现各种问题
重点阅读一下,“多级目录(嵌套路由)”,官网提到在“不要忘记还要手动在二级目录的根文件下添加一个
<router-view>
” -
1.2 快捷导航(标签栏导航) | vue-element-admin (panjiachen.github.io)
重点阅读一下,“注意事项”和 “缓存不适合场景”
-
1.3 新增页面——多级目录(嵌套路由) | vue-element-admin (panjiachen.github.io)
阅读一下多级目录(嵌套路由)
2.导致<keep-alive>不符合预期的可能原因
① 路由配置上,“name”属性配置不对
比如,在router.js配置的一个路由的name为“dashboard”,而组件的name属性为“Dashboard”。如下图,未缓存。
应该改为一致:在router.js配置改为和组件的name属性一致,改为“Dashboard”。如下图,缓存成功。
对应该文章的前面的1.1、1.2。
② 组件自身的 name 选项未写
由于组件自身的 name 选项未写,**include
**匹配不到组件自身的 name
选项,同样未缓存成功。
对应该文章的前面的1.1、1.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>不缓存的解决方法”。
这篇关于vue-element-admin——<keep-alive>不符合预期缓存的原因的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!