vue3实现keep-alive一个组件（一个vue使用多个页面支持缓存）使用多个页面（多个路由）已解决...

最新推荐文章于 2025-04-16 09:30:00 发布

邦杠

最新推荐文章于 2025-04-16 09:30:00 发布

阅读量206

点赞数 2

文章标签： vue.js 缓存前端 javascript ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_42981419/article/details/144125273

版权

代码

<router-view v-if="routerAlive">
      <template #default="{ Component, route }">
        <keep-alive :include="getCaches">
          <component :is="formatComponentInstance(Component,route.name)" :key="route.name"/>
        </keep-alive>
      </template>
</router-view>

js方法

// 用来存已经创建的组件
const wrapperMap = new Map();

// 将router传个我们的组件重新换一个新的组件，原组件包里面
function formatComponentInstance(component, fullPath) {
  let wrapper;
  if (component) {
    const wrapperName = fullPath;
    if (wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName);
    } else {
      wrapper = {
        name: wrapperName,
        render() {
          return h(component);
        },
      };
      wrapperMap.set(wrapperName, wrapper);
    }
    return h(wrapper);
  }
}