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

原创已于 2023-02-13 09:19:12 修改 · 9.9k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

不会飞的飞行员_

关注

标签

#vue

分类前端开发

于 2022-03-22 16:32:58 首次发布

本文详细介绍了在Vue 2.1.0及以上版本中如何使用`keep-alive`组件的`include`属性来实现页面缓存。内容包括确认Vue版本、设置组件的`name`属性与`include`匹配，以及处理多级`router-view`嵌套的情况。通过三种不同的写法展示了如何指定要缓存的页面，并强调了当有多个嵌套`router-view`时，每个级别的`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>