wordpress新闻站主题,地方门户网站源码下载,重庆公司公章图片,怎么创建图片链接vue-element-admin——keep-alive不符合预期缓存的原因
本文章#xff0c;以现在中后台开发用的非常多的开源项目vue-element-admin为案例。首先#xff0c;列出官方文档与缓存keep-alive相关的链接#xff08;请认真阅读#xff0c;出现缓存keep-ali…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不缓存的解决方法”。
