当前位置: 首页 > news >正文

vue的KeepAlive应用(针对全部页面及单一页面进行缓存)

KeepAlive的作用是缓存包裹在其中的动态切换组件

当一个组件在 中被切换时,它的 activated 和 deactivated 生命周期钩子将被调用,用来替代 mounted 和 unmounted。这适用于 的直接子节点及其所有子孙节点。

缓存全部页面

将app.vue中的路由出口改为:

<router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive>
</router-view>

只缓存特定页面

利用include来包含
也可以使用exclude 反向排除

<router-view v-slot="{ Component }"><keep-alive :include="['HomePage']"><component :is="Component" /></keep-alive>
</router-view>

HomePage 指的是HomePage 组件或者内部有属性name为HomePage 的组件

http://www.lryc.cn/news/520463.html

相关文章:

  • lwip单网卡多ip的实现
  • // Error: line 1: XGen: Candidate guides have not been associated!
  • 第21篇 基于ARM A9处理器用汇编语言实现中断<三>
  • mac homebrew配置使用
  • 慧集通(DataLinkX)iPaaS集成平台-业务建模之业务对象(三)
  • 【redis初阶】环境搭建
  • salesforce sandbox的用户如何重置密码
  • 做一个 简单的Django 《股票自选助手》显示 用akshare 库(A股数据获取)
  • 01、kafka知识点综合
  • 怎么用python写个唤醒睡眠电脑的脚本?
  • 【Linux】Linux开发:GDB调试器与Git版本控制工具指南
  • Git 的引用规格(refspec)语法
  • 反转链表题目
  • LED灯按键调光芯片、PWM调光IC、发光灯控制调光芯片
  • Android Room 报错:too many SQL variables (code 1 SQLITE_ERROR) 原因及解决方法
  • USA-Entrepreneur-20240708-Business/Unusual
  • AI算法在目标锁定跟踪领域的利与弊!
  • 移远BC28_opencpu方案_pin脚分配
  • 初学stm32 --- II2C_AT24C02,向EEPROM中读写数据
  • 动态规划汇总1
  • 【计算机网络】lab5 ARP协议
  • 分布式缓存redis
  • 【Rust】数据类型
  • 在现代工业自动化领域CClinkIE转ModbusTCP网关的应用
  • ASP.NET Core与GraphQL集成
  • Zabbix 从入门到精通
  • 文生图模型的技术原理、训练方案与微调方案
  • 3_CSS3 渐变 --[CSS3 进阶之路]
  • 国内主流的Spring微服务方案指南
  • docker更换镜像源脚本