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);
    }
  }
相关推荐
jjw_zyfx41 分钟前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷3 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱05674 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.5 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding5 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥5 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信5 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩5 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌6 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司6 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui