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 动态删除组件缓存的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 示例vue 的keep-alive缓存功能的实现

    示例vue 的keep-alive缓存功能的实现

    本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素

  • vue2中的keep-alive使用总结及注意事项

    keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM.结合vue-router中使用,可以缓存某个view的整个内容. 基本使用如下: <keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive> 一般有这样的需求,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页

  • vue里如何主动销毁keep-alive缓存的组件

    问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境 这个项目是基于一个开源 vue

  • 详解Vue中组件的缓存

    详解Vue中组件的缓存

    之前在<Vue一个案例引发的动态组件与全局事件绑定总结>这篇文章中简单提到过组件的缓存.当时只是简单的提供了一个解决问题的思路,并没有说到多少组件缓存的东西,今天我们就来详细说说组件的缓存. 组件化开发模式下,我们会把整个项目拆分成很多组件,然后按照合理的方式组织起来. 自然就存在组件之间的切换问题,Vue 中有个「动态组件」的概念,它能够让我们更好的实现组件的切换. 在实际的项目开发中,产品是不可能放过我们的,需求总是在不停的变化,如果你碰到那些不改需求的产品就嫁了吧,太难得了. 最近项目中

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

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

    业务需求: 切换tab页标签的时候(路由前进的时候),缓存当前组件数据,关闭tab页标签的时候清除组件缓存. 实现: 1.先在store的state里面设置一个要缓存数组 2.在进到子页面的时候,更新store的数组,把将要缓存组件的name(注意:是组件的name,并不是路由的name),装进数组 3.当前组件的route-view,外层包裹keep-alive,include用你从仓库里面取出来的数组 4.关闭标签页(也就是后退路由的时候),清空store里的数组 总结:通过动态的设置inc

  • Vue切换Tab动态渲染组件的操作

    使用<component :is="组件名"></component> 结合Element-UI的导航菜单 : UI组件 el-menu-item里的index写对应的组件名 点击事件@select="handleSelect" <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal&quo

  • vue中keep-alive内置组件缓存的实例代码

    需求: home 组件中有一个 name 的 data 数据.这个数据修改之后,再切换到其他的组件.再切换到 home 组件,希望 home 中 name 这个值是之前修改过的值.希望组件有缓存. keep-alive 的使用方式: 将要缓存的组件使用 keep-alive 包裹住即可. keep-alive优点的介绍: 1. 切换组件时,当前组件不会触发销毁的生命周期钩子.也就是说不会销毁了. 2. 切换回来时,也不会重新创建.(既然都没有被销毁,哪里来的重新创建呢) 3. 会多出两个生命周期

  • vue中使用keep-alive动态删除已缓存组件方式

    vue中使用keep-alive动态删除已缓存组件方式

    目录 项目场景 问题描述 解决方案 项目场景 在做后台管理系统的时候,有这样一个需求: 后台的界面如下: 点击左边的菜单,会在右边的顶部生成一个个tag导航标签.当打开多个tag页时,用户可以在多个tag之间进行切换.需要在新增,修改页面切换tag时候,保留之前的信息,不进行页面的刷新. 问题描述 经过查询vue文档,可以使用keep-alive实现标签路由缓存,实现方式如下: 在路由配置的meta中添加keepAlive,如下: { path: '/actdebt', component: L

  • vue 实现拖拽动态生成组件的需求

    vue 实现拖拽动态生成组件的需求

    产品需求 开完产品需求会议,遇到了一个需求,首先页面分成两栏布局,左侧展示数据组件,支持拖拽排序,点击按钮清除组件.右侧支持将组件的缩略图拖拽至左侧生成一个新的组件. 思路 对于动态生成组件来说每一次都要是生成全新的一个组件,那么就可以把 组件放进函数当中 return.在JSX中调用函数,每次调用函数都会返回一个全新的组件.这对React来说非常简单,但是对于Vue来说,直接将组件返回是不可能的.尽管这个 return 写法不适合Vue,但是我们不可否认,思路是非常正确的,所以我们应该考虑一个

  • vue点击按钮动态创建与删除组件功能

    vue点击按钮动态创建与删除组件功能

    主要功能需求点: 点击左侧组件库按钮创建对应的不同的组件,并在右侧区域展示 点击右侧创建的组件中的删除按钮,删除对应的组件 删除对应的组件之后,下方的组件位置自动上移 效果图: 代码: 父组件代码(去除了css样式代码): <template> <div class="home"> <div class="container"> <div class="addZujian"> <div>

  • 有关vue 组件切换,动态组件,组件缓存

    目录 一.组件的切换方式 方式一: 使用 v-if和v-else 方式二:使用内置组件:<component></component> 方式三 : vue-router 二.组件缓存: keep-alive 1.keep-alive定义 2.keep-alive的生命周期 三.keep-alive使用方法 1.Props 2.搭配<component></component>使用 3.搭配<router-view />路由使用 4.清除缓存组件

  • Vue浅析讲解动态组件与缓存组件及异步组件的使用

    Vue浅析讲解动态组件与缓存组件及异步组件的使用

    目录 1.什么是动态组件 2.如何实现动态组件渲染 3.如何实现缓存组件 4.异步组件 1.什么是动态组件 当我们希望页面中的某个地方,在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件. 2.如何实现动态组件渲染 vue提供了一个内置的组件,专门用来实现动态组件的渲染:通过 is 属性动态指定要渲染的组件 因为要渲染的组件是不确定的,所以要通过data申明一个变量用来接收组件的名称,用 :is 动态绑定这个变量到组件中,通过按钮添加事件改变变量的值来切换相应组件 案例: //父

  • vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    vue使用keep-alive进行组件缓存方法详解(组件不缓存问题解决)

    目录 一.使用场景 二. 认识下keep-alive 三.在组件中应用 四.解决组件不缓存问题 五.keep-alive配合router使用 总结 一.使用场景 在vue开发过程中(单页面),有一些需求需要我们把页面状态保存下来.在切换页面时,页面不会进行重新加载. 一般情况下,如果不做特殊处理,会重新执行created 和 mounted生命周期,从而重新加载页面,默认就显示到第一页去了,就很烦. (我的问题是,使用keep-alive了,但组件仍然不缓存,下面会解决) 二. 认识下keep-

  • vue.js 嵌套循环、if判断、动态删除的实例

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API app.html <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs 嵌套循环.if判断 </title> <

随机推荐