专栏首页大宇笔记Vue KeepAlive表单页缓存场景

Vue KeepAlive表单页缓存场景

写这篇博文的目的是整理思路,KeepAlive动态修改目前有局限性,只使用改变 状态修改页面是否缓存,无法彻底删除上次缓存。

一、业务场景


  1. 一个表单页面
  2. 填写表单
  3. 点击查看协议,返回时候缓存
  4. 点击提交之后,下次进入不应该缓存就那么简单

我们是在app.vue 添加keepAlive缓存,通过路由配置开关

{
    path: "/enterpriseApply",
    name: "enterpriseApply",
    component: enterpriseApply,
    meta: {
      showFooter: false,
      keepAlive: true
    }
  }
<template>
  <div class="body_wrap">

    <keep-alive >
    <router-view v-if="this.$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!this.$route.meta.keepAlive"></router-view>
    <footerNav v-if="$route.meta.showFooter"></footerNav>
  </div>
</template>

二、设计思路


默认KeepAlive已熟悉 , 不熟悉的可以看下官网

KeepAlive 推荐使用include和 exclude 添加和移除缓存组件,需要Vuex的配合,我们项目比较小,没有需求大量使用Vuex,集成过于冗余。

KeepAlive存在问题:提交完表单之后,下一次提交的时候,如何删除上一次缓存问题。

解决方案(尝试):

  1. 通过路由守卫动态修改KeepAlive属性,结果下次进来页面还是被缓存了。 ------- 【X】
  2. 提交表单的时候,销毁页面,下次进入的时候缓存还在。 ------- 【X】
  3. 找到Cache,删除指定缓存页面。参考查看----【✔️】

总结:尝试了几种方案,问题点是在于,删除缓存,下次不会显示,第三种可行。

三、实践代码


伪代码:

路由守卫离开函数{
	if 离开去缓存的页面 {
		本页面keepAlive 打开
	}else{
		销毁这次缓存
	}
}

路由守卫进入函数{
    打开本页面的keepAlive
}

注意:因为上次离开的时候,删除了缓存,keepAlive 属性进来的时候还需要更改。

实践代码:

beforeRouteLeave (to, from, next) {
    if (to.name === "agree") {
      from.meta.keepAlive = true
      console.log(from.meta.keepAlive)
    } else {
      if (this.$vnode && this.$vnode.data.keepAlive) {
        if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
          if (this.$vnode.componentOptions) {
            var key = this.$vnode.key == null
              ? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
              : this.$vnode.key;
            var cache = this.$vnode.parent.componentInstance.cache;
            var keys = this.$vnode.parent.componentInstance.keys;
            if (cache[key]) {
              if (keys.length) {
                var index = keys.indexOf(key);
                if (index > -1) {
                  keys.splice(index, 1);
                }
              }
              delete cache[key];
            }
          }
        }
      }
      this.$destroy();
    }
    next();
  },
  beforeRouteEnter (to, from, next) {
    if (to.name === "enterpriseApply") {
      to.meta.keepAlive = true
    }
    next();
  },

四、总结


这样虽然解决了强制删除缓存的目的,感觉还是不够优雅,是否可以不借助Vuex动态的修改Include和exclude 来实现呢?有更好的方法,欢迎留言指教。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 商城分类页面自适应标题,自适应换行。

      最近在做商城,做到分类觉得网上应该一大把现成的代码。搜了一会没有搜到,懒人也懒不了了。

    ZY_FlyWay
  • Swift4.0 KVC 字典赋值模型改变

    我们都知道KVC 是OC  NSobject特有的,之前在Swift4.0之前,继承NSobject的对象,可用动态的拿到字典调用KVC给模型赋值。只是比较省...

    ZY_FlyWay
  • iOS 程序内存指针和对象的理解

    最近对指针和内存有产生了浓厚的兴趣,然后就想研究一下iOS 程序指针内存对象这些东西都是怎么关联在一起的呢,又是怎么工作的呢。

    ZY_FlyWay
  • MyBatis 中的九种设计模式!

    虽然我们都知道有26个设计模式,但是大多停留在概念层面,真实开发中很少遇到,Mybatis源码中使用了大量的设计模式,阅读源码并观察设计模式在其中的应用,能够更...

    全栈自学社区
  • 以数字中国为引领,探索未来教育新生态

    腾讯高校合作
  • VMware网络设置的三种方式

      在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模式。在host-only模式中,所有的虚拟系统是可以相互通...

    爱学习的孙小白
  • 虚拟机的三种网络连接方式

    正文 VMWare提供了三种工作模式,它们是bridged(桥接模式)、NAT(网络地址转换模式)和host-only(主机模式)。要想在网络管理和维护中合理...

    lwen
  • 设计模式专题(二十四) ——访问者模式

    设计模式专题(二十四)——访问者模式 (原创内容,转载请注明来源,谢谢) 一、概述 访问者模式(visitor)表示一个作用于某对象结构中的各元素的操作,它使...

    用户1327360
  • ubuntu 16.04安装软件常见错误 Could not get lock /var/lib/dpkg/lock - open (11: Resource temporarily unavaila

      因为刚装好的Ubantu系统,内部缺少很多软件源,这时,系统会自动启动软件源更新进程“apt-get”,并且它会一直存活。由于它在运行时,会占用软件源更新时...

    黑泽君
  • Ubuntu“无法获得锁”解决方案(E: 无法获得锁 /var/cache/apt/archive)

    [scode type="yellow"]Ubuntu “无法获得锁”解决方案(E: 无法获得锁 /var/cache/apt/archive)[/scode]

    乐心湖

扫码关注云+社区

领取腾讯云代金券