vue 的 keep-alive include 属性不生效问题

1. 确定 vue 版本

因为根据 vue 官方文档来看 "include" and  "exclude" 属性是在 2.1.0 版本新增的

"vue": "2.6.10",

2. 确保 vue 文件的 "name" 属性值和添加到 "include" "exclude" 的属性一致

// page.vue 文件的 script 模块
export default {
  name: "page",
  ...
}

<!-- 第一种写法使用逗号拼接 想要缓存的页面的 name 值 -->
<keep-alive include="page,page1,...">
  <router-view></router-view>
</keep-alive>

<!-- 第二种写法使用正则表达式 (使用 `v-bind`)匹配 想要缓存的页面的 name 值 -->
<keep-alive :include="/^page.*/">
  <router-view></router-view>
</keep-alive>

<!-- 第三种写法使用数组保存 想要缓存的页面的 name 值 -->
<keep-alive include="['page', 'page1', ...]">
  <router-view></router-view>
</keep-alive>

3. 如果上述两种条件都达成了但是仍然 include 属性仍然没有生效那很可能就是因为你的项目中存在超过两级以上的<router-view></router-view>嵌套

对于这种多嵌套页面使用 include 属性，应对每一级 keep-alive 都添加上 include 属性

<!-- 一级 router-view page的父级的父级页面 -->
<keep-alive include="page,page1,...">
  <router-view></router-view>
</keep-alive>

<!-- 二级 router-view page的父级页面 -->
<keep-alive include="page,page1,...">
  <router-view></router-view>
</keep-alive>

<!-- 三级 router-view page页面 -->
<keep-alive include="page,page1,...">
  <router-view></router-view>
</keep-alive>