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