背景
我相信某些靓仔开发们会遇到这样的需求，你们被要求开发一个类似谷歌浏览器的tab选项卡，该选项卡要求被缓存，于是你就会想到keepalive，而且在选项卡被关闭时要销毁那个组件的实例，释放内存，于是你可能会想到调用组件的$destroy方法，如果你这么做了，你就会发现下次这个组件将不会再被缓存。
下面是一个需求做出来的例子：
首先可以去查找说明文档，你会发现有几个重要的option，没错就是他们（include）。传送门：戳这里
这是使用的示例：
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<router-view/>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<router-view/>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<router-view/>
</keep-alive>
注意：示例里的a b代表的是组件的name 选项，不是路由里面的那个name！！！
思路
- 组件中的name起名将与path一致，方便获取。
- 在vuex中创建一个数组includeName用于存放。
- 将该数组复制给keepalive的属性include。
以下是我的部分代码，用了max选项是为了限制同时缓存组件的数量。
引用vuex:
computed: {
...mapState(['includeName'])
}
布局页面中：
<keep-alive
:max="10"
:include="includeName.join(',')"
>
<router-view/>
</keep-alive>
