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>

  • 6
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

不会飞的飞行员_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值