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>

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐