vue自定义keepalive组件的问题解析

目录
  • vue自定义keepalive组件
  • 为什么会出现这种情况呢
  • 如何解决这个问题呢
  • 问题知道了怎么解决呢
  • 思路有了撸代码
  • 如何使用
  • 主题说完了，整点其他的

vue自定义keepalive组件

前一阵来了一个新的需求，要在vue项目中实现一个多开tab页面的功能，本来心想，这不简单嘛就是一个增加按钮重定向吗？（当然如果这么简单我就不写这个文章了）。很快写完，提交测试。测试大哥很快就提交了一个问题："你两个tab页访问同一个链接，怎么还是个联动的呢？"。我擦，这指定是缓存的问题。

为什么会出现这种情况呢

keep-alive组件是使用 include exclude这两个属性传入组件名称来确认哪些可以被缓存的

    <keep-alive exclude="a,b,c" >
        <router-view></router-view>
    </keep-alive>

我们在看一下源码，看看人家是怎么实现的（这两张图截的真难看）

主要逻辑（直说上述代码）就是根据传入的 include, exclude 两个属性传入数组，根据当前访问的组件名称判断。我们相同链接都访问同一个组件名称（name）相同，第二次访问的时候，链接指向的是同一个组件，因为使用组件的name作为缓存key，此时会被认为是读取缓存操作，就会直接加载缓存并渲染，所以出现了两个tab页访问同一个链接，出现联动情况

如何解决这个问题呢

这个比较简单之前是因为组件name当key导致的，那我们就不使用组件的name作为key了，改为name+tab的index作为key。

问题知道了怎么解决呢

思路有了撸代码

group-keep-alive.js

如何使用

意思一下就行了

<group-keep-alive>
   <router-view :key="key" />
/group-keep-alive>

// key一定要区分
computed: {
    key() {
      return `${选中index}/${fullpath}`
    },
}

主题说完了，整点其他的

1. 在group-keep-alive组件中设置了abstract: true，设置当前组件为抽象组件，我的李姐：就是一个对下一级（包含子元素）事件监听等提前拦截，从而对下一级进行操作

2. router-view :key="key" 这key的作用是用来区分同一个组件是不是重复使用一个实例。

到此这篇关于vue自定义keepalive组件的文章就介绍到这了,更多相关vue keepalive组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue前端开发keepAlive使用详解

    vue前端开发keepAlive使用详解

    目录 前言 keep-avlive钩子函数 keep-avlive缓存哪些组件 小结及注意事项 前言 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性.使用方式为 <keep-alive> <component /> </keep-alive> 这里的component会被缓存. keep-avlive钩子函数 被包含

  • Vue设置keepAlive不生效问题及解决

    Vue设置keepAlive不生效问题及解决

    目录 设置keepAlive不生效 1.在App.vue中的设置 2.在router中的index.js设置 keep-alive缓存组件不生效的坑 坑出现背景 坑的原因 代码如下 设置keepAlive不生效 如演示,Vue页面导航回退后页面重新刷新了,搜索条件及结果都重置了,对于页面需要频繁切换的系统来说,体验不佳,我们希望页面第一次打开时加载,此后回退不再刷新 查阅了Vue官网后,发现vue2.0提供了一个keep-alive组件. 1.在App.vue中的设置 <template> &

  • vue3 keepalive源码解析解决线上问题

    vue3 keepalive源码解析解决线上问题

    目录 引言 1.keepalive功能 2.keepalive使用场景 3.在项目中的使用过程 4.vue3 keepalive源码调试 5.vue3 keealive源码粗浅分析 6.总结 引言 1.通过本文可以了解到vue3 keepalive功能 2.通过本文可以了解到vue3 keepalive使用场景 3.通过本文可以学习到vue3 keepalive真实的使用过程 4.通过本文可以学习vue3 keepalive源码调试 5.通过本文可以学习到vue3 keepalive源码的精简分

  • 解决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使用案例详解

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

  • 详解Vue适时清理keepalive缓存方案

    目录 需求 思考 尝试 1. 手动操作 keep-alive 组件的 cache 数组 2. exclude 大法好 Demo 需求 单页面应用中,用户进入表单填写页面,需要初始化表单内容,填写过程中可能涉及到地图选点或者列表选择等操作,需要到新的页面选择并回调显示. 此时我们需要缓存表单填写页面实例,当退出表单填写或提交完表单内容之后,需要销毁当前表单实例,下次进入重新进行初始化 思考 说到 Vue 缓存,我们肯定首先选择官方提供的缓存方案 keep-alive 内置组件来实现. keep-a

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

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

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

  • vue自定义keepalive组件的问题解析

    vue自定义keepalive组件的问题解析

    目录 vue自定义keepalive组件 为什么会出现这种情况呢 如何解决这个问题呢 问题知道了怎么解决呢 思路有了撸代码 如何使用 主题说完了,整点其他的 vue自定义keepalive组件 前一阵来了一个新的需求,要在vue项目中实现一个多开tab页面的功能,本来心想,这不简单嘛就是一个增加按钮重定向吗?(当然如果这么简单我就不写这个文章了).很快写完,提交测试.测试大哥很快就提交了一个问题:"你两个tab页访问同一个链接,怎么还是个联动的呢?".我擦,这指定是缓存的问题. 为什么

  • vue中keep-alive组件实现多级嵌套路由的缓存

    目录 现状(问题): 探索方案: 实现方式 现状(问题): keep-alive 组件对第三级及以上级的路由页面缓存失效 探索方案: 方案1.直接将路由扁平化配置,都放在一级或二级路由中方案2.再一层缓存组件用来过渡,并将其name配置到include中 实现方式 方案1不需要例子,按规则配置路由就行重点介绍方案2因为我用了vue-element-admin做了架构,并且项目中我将菜单和路由全部通过服务端返回做了统一配置,所以我只能用方案2来实现. 直接看原有代码(问题代码) // src/la

  • vue自定义全局组件(自定义插件)的用法

    vue自定义全局组件(自定义插件)的用法

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件

  • Vue中keep-alive组件的深入理解

    前言 最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了. 正文 我们都知道,vue组件进行路由跳转时,会销毁当前组件.所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数.这就导致了上述问题,A路由传到B路由的参数没了. 当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-ali

  • vue中keep-alive组件的用法示例

    vue中keep-alive组件的用法示例

    问题描述(什么是keep-alive) keep-alive顾名思义,保持活跃.保持谁活跃呢? 首先我们知道,因为vue就是组件化编程,一个.vue文件就是一个组件.就像万事万物一样,都有从出生到消亡的生命周期过程,vue的组件也是一样,也有自己的生命周期,比如create创建组件.mounted往组件上挂数据.update更新组件上挂的数据,destroy把组件实例销毁. 所以使用keep-alive就是保持组件活跃,不会被destroy销毁掉,就一直还活着,组件没有被销毁掉的话,组件上挂载的

  • vue自定义开关组件使用详解

    vue自定义开关组件使用详解

    本文实例为大家分享了vue自定义开关组件的具体代码,供大家参考,具体内容如下 switch.vue: <template>   <div class="disLB">     <div class="switch disLB" @click="toggleSwitch" :class="isOpen?'switch-on':''">       <span class="di

  • vue自定义全局组件实现弹框案例

    vue自定义全局组件实现弹框案例

    本文实例为大家分享了vue自定义全局组件实现弹框案例的具体代码,供大家参考,具体内容如下 说明:本案例是封装的一个弹框页面,因为只想要一个遮罩,内容自定义.因为ElementUI上已经提供了一个弹框组件,但觉得elementUI的组件内容有点多,所有自己就封装了全局组件.自己封装的参考了elementUI组件的源码. 主要步骤如下 1.创建一个文件夹my-dialog2.在my-dialog文件夹下创建MyDialog.vue和index.js3.index.js需要引入MyDiloag并封装和

  • Vue 自定义动态组件实例详解

    现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js

  • Vue自定义toast组件的实例代码

    写了两三天,终于把toast组件写出来了.不敢说是最好的设计,希望有更好思路的朋友可以在评论区给我意见!_(:з」∠)_ 第一步:写toast.vue,将样式之类的先定下来 <template> <div v-show="showToast" class="toast" :class="position"> <div class="toast_container" v-if="type=

随机推荐