keep-alive缓存遇到的坑

keep-alive

• 属性：

  • include - 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

• 用法：

  <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示:

<!-- 逗号分隔字符串 --> <keep-alive include="a,b"> <component :is="view"></component> </keep-alive> <!-- 正则表达式 (使用 `v-bind`) --> <keep-alive :include="/a|b/"> <component :is="view"></component> </keep-alive> <!-- Array (use `v-bind`) --> <keep-alive :include="['a', 'b']"> <component :is="view"></component> </keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配。

我按照官网https://vue.docschina.org/v2/api/#keep-alive 描述实现了首页菜单加载缓存，结果折腾了一天，发现name总是无法匹配，页面缓存失效，我所有的vue都没有name定义名字，网上收了很多说法如下：

最后在发现在vue编辑工具中对name进行设置出现的错误提示，又尝试改用大写命名；

 

最后修改name=SystemStaff后马上生效

总结：

1、作为菜单的vue需要定义name；

2、给vue定义name，首字母需要大写；