vue keepAlive缓存清除问题案例详解

vue项目中经常会用到keepalive来做缓存，在应付基本要求上可以说非常方便。但是遇到同一个页面，根据条件不同，分别缓存或者不缓存，就有些麻烦了。

首先先把坑列出来：

1.

<keep-alive v-if="xxx">
          <router-view />
</keep-alive>
<keep-alive v-else>
          <router-view />
</keep-alive>

网上很多都是这种方法，用了这种方法，已缓存的东西是没法删掉的，其实这个方法是把缓存页面和不缓存页面完全分成了两个组件展示，虽然一般情况下看着是那么回事，其实就是根据你的条件，不同时候展示不同的组件来看。

2.

vm.$destroy()

当想到把已有的缓存去掉，我估计大多数人第一反应都是想着怎么把缓存删掉，于是乎我也尝试想办法把缓存删掉。然后调用了vue的销毁方法。当销毁后你会很开心的发现实现了！缓存删掉了~ 于是乎你就以为改好了，跑去继续开发别的东西。突然某一天你发现，诶？ 我这个页面怎么不缓存了？ 经过一番排查 发现了调用过$destroy()的页面就不会再缓存了。。

最后我的解决方案：

Template
<keep-alive :include="keepAlive.join(',')">
         <router-view />
</keep-alive>

vuex

keepAlive: [
        '/joinManage/register/add-step1',
        '/joinManage/register/add-step2',
        '/joinManage/register/add-step3',
        '/joinManage/config/add-step1',
        '/joinManage/config/add-step2',
        '/joinManage/config/add-step3',
        '/joinManage/config/add-step4',
        '/joinManage/config/add-step5',
    ],

利用include+vuex，动态改变所需缓存页面。include所接受的为组件的name（此处我嫌命名麻烦，直接用path命名了， 其实并不是使用path）

这样的话，当我们某个页面需要缓存，我们就把其name加入keepalive数组中，不需要就删除对应的。这样就可以实现keepAlive的缓存删除效果了

到此这篇关于vue keepAlive缓存清除问题案例详解的文章就介绍到这了,更多相关vue keepAlive缓存清除问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中keepAlive组件的作用和使用方法详解

    vue中keepAlive组件的作用和使用方法详解

    前言 在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗? keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一般情况下,组件进行切换的时候,默认会进行销毁,如果有需求,某个组件切换后不进行销毁,而是保存之前的状态,那么就可以利用keep-alive来实现 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹

  • 解决Vue中使用keepAlive不缓存问题

    1.查看app.vue文件,这个是重点,不能忘记加(我就是忘记加了keep-alive) <template> <div> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"><

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

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

  • Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

    需求分析 背景: 1.数据列表页,滚动加载数据: 2.多条数据情况下,点击某一条,进入详细页进行编辑(修改,删除)操作: 3.保存返回上一页: 在上面的情况下,想要保持在上次浏览位置,并且保持数据是最新的: 解决办法 1.原始的办法:在点击详情页的时候,记住浏览位置,传递参数或者存到本地缓存,然后在详情页操作完毕后,返回的时候,路由守卫可以判断,是否详情页跳转回来的,然后让页面滚动到上次记录的位置: 思路是这样,实际操作很麻烦: 2.推荐办法:使用vue动态组件keep-alive,搭配路由守卫

  • vue之keepAlive使用案例详解

    在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态:vue里提供了keep-alive组件用来缓存状态. 可以用以下几种方案解决问题: 一.利用meta标签 1.首先在路由中的meta标签中记录keepAlive的属性为true path: '/classify', name: 'classify', component: () => import('@/views/classify/classify.vue'), m

  • vue keepAlive缓存清除问题案例详解

    vue keepAlive缓存清除问题案例详解

    vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方

  • Vue的方法和属性案例详解

    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}}调用要写() 示例 {{aa()}} 事件触发 @click=aa"可以有()也可以没有如果需要传参,加上() 把$event这个特殊参数传进去可以获取事件对象 2.计算属性 计算属性是什么 computed 计算属性的特点 计算属性有缓存 计算属性是基于他们的依赖进行缓存的 计算属性只有在他的相关依赖发生改变时才会重新求

  • vue.js+boostrap项目实践(案例详解)

    vue.js+boostrap项目实践(案例详解)

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3

  • Vue之vue.$set()方法源码案例详解

    在使用vue开发项目的过程中,经常会遇到这样的问题:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 这是因为新加入的属性不是响应式的,因此不会触发视图的更新,通常使用静态方法Vue.set()或者实例方法this.$set()解决 ,使用方式: 对象:this.$set(target,key,  value) 数组:this.$set(target,index,  value) 但不管是静态方法Vue.

  • Vue之监听方法案例详解

    vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') c

  • vue之监听器的使用案例详解

    vue之监听器的使用案例详解

    第一种,用jquery的ajax发请求  用户注册时,判断用户名不能重复,可以用到监听器.监听器,用watch,需要监听哪个值的变化,就把这个值,放在watch里面.  拿到新值,调用接口,去请求后端,判断用户名是否已存在.  此时,遇到的问题,用户刷新页面的时候,并不会触发监听器,只是在username值发生变化的时候,才会触发监听器,改进方法:将方法格式的侦听器改成对象格式的侦听器. 优先推荐方法格式的监听器(最简单),如果刷新进来就需要执行一次,就定义成对象的监听器.  当一个对象有多个属

  • Vue.js之$emit用法案例详解

    Vue.js之$emit用法案例详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn:  例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&

  • vue el-date-picker动态限制时间范围案例详解

    vue el-date-picker动态限制时间范围案例详解

    分为两种情况 1.开始时间和结束时间同一个框(限制只能本月) 2.开始时间和结束时间分开两个框(限制开始时间不能早于当前时间且结束时间不超过开始时间一星期)  情况1 //情况1 原创版权声明:本文为weixin_40998880原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. //本文链接:https://blog.csdn.net/weixin_40998880/article/details/106272897 //html <el-date-picke

  • vue缓存之keep-alive的理解和应用详解

    官方解释: <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 主要用于保留组件状态或避免重新渲染. keep-alive 是 Vue 的内置组件,

随机推荐