当前位置: 首页 > 编程笔记 >

vue keep-alive 动态删除组件缓存的例子

姜弘化
2023-03-14
本文向大家介绍vue keep-alive 动态删除组件缓存的例子,包括了vue keep-alive 动态删除组件缓存的例子的使用技巧和注意事项,需要的朋友参考一下

业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存。

实现:

1、先在store的state里面设置一个要缓存数组

2、在进到子页面的时候,更新store的数组,把将要缓存组件的name(注意:是组件的name,并不是路由的name),装进数组

3、当前组件的route-view,外层包裹keep-alive,include用你从仓库里面取出来的数组

4、关闭标签页(也就是后退路由的时候),清空store里的数组

总结:通过动态的设置include(要缓存的组件)的数组,来动态的控制组件是否缓存

以上这篇vue keep-alive 动态删除组件缓存的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。

 类似资料:
  • 1. 前言 本小节我们将介绍 Vue 的动态组件以及缓存 keep-alive 的使用。包括动态组件的使用方法,以及如何使用 keep-alive 实现组件的缓存效果。 2. 慕课解释 动态组件是让多个组件使用同一个挂载点,并动态切换。动态组件是 Vue 的一个高级用法,但其实它的使用非常简单。keep-alive 是 vue 的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染 DOM

  • 本文向大家介绍vue中keep-alive内置组件缓存的实例代码,包括了vue中keep-alive内置组件缓存的实例代码的使用技巧和注意事项,需要的朋友参考一下 需求: home 组件中有一个 name 的 data 数据。这个数据修改之后,再切换到其他的组件。再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值。希望组件有缓存。 keep-alive 的使用方式: 将

  • del 清空指定缓存 await this.app.redis.del('name') flushall 清空所有缓存 await this.app.redis.flushall() lpop 从数组最左边删除一项 await this.app.redis.lpop('userList') rpop 从数组最右边删除一项 await this.app.redis.rpop('userList')

  • 本文向大家介绍示例vue 的keep-alive缓存功能的实现,包括了示例vue 的keep-alive缓存功能的实现的使用技巧和注意事项,需要的朋友参考一下 本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在

  • 问题内容: 当前的官方文档仅显示如何动态 更改 标签 内 的组件。 我想实现的是,让我们说我有3个部分组成:,,并具有以下选择: 再有6个按钮,这将增加或删除每个组件:,,和 当我单击时,该页面将添加到呈现它的页面中,因此该页面将包含: 然后,如果我单击两次,该页面现在将包含: 如果单击,该页面现在将包含所有这些组件: 可以在Angular中实现吗?请注意,这不是我要寻找的解决方案,因为它仅允许向

  • DELETE /feeds/:feed/currency Response Status: 204 No Content