vue3 keep-alive多个路由使用同一个组件的缓存问题

上一篇文章讲到当打开多个内页签页面, keep-alive缓存每个页面,导致内存溢出。顾添加max=10, 在此基础上希望每次关闭内页签页面时,能够手动的清除当前页面的缓存。

我们可以通过改变exclude来实现手动清除keep-alive缓存。 exclude需要的是组件的名称。

这里就有一个问题:我们多个编辑页面公用一个组件, 但我们会有多个缓存,也就是当打开多个编辑页面, 当关闭其中一个编辑页的时候, 传入对应组件的name, 会把所有的编辑页面的缓存都移除。

这时该怎么解决呢?我们可以给不同的编辑页面设置一个唯一的组件名称, 具体实现如下:

html 复制代码
<router-view v-slot="{ Component }">
      <div class="app-main-height">
        <keep-alive :max="10" :exclude="excludes">
          <component :is="formatComponentInstance(Component, $route)" :key="$route.path" />
        </keep-alive>
      </div>
    </router-view>
    
js 复制代码
// 用来存已经创建的组件
  const wrapperMap = new Map();
  // 将router传个我们的组件重新换一个新的组件,原组件包里面
  function formatComponentInstance(component, route) {
    let wrapper;
    if (component) {
      const wrapperName = route.path;
      if (wrapperMap.has(wrapperName)) {
        wrapper = wrapperMap.get(wrapperName);
      } else {
        wrapper = {
          name: wrapperName,
          render() {
            return h(component);
          },
        };
        wrapperMap.set(wrapperName, wrapper);
      }
      return h(wrapper);
    }
  }
相关推荐
麦麦大数据23 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
三翼鸟数字化技术团队2 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记3 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆3 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang3 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf3 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir3 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
爱摄影的程序猿5 小时前
如何基于 Django-Vue-Admin 快速二次开发?高效后台管理系统实战指南(附完整代码)
vue.js·python·django
前端极客探险家5 小时前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法