vue3 keep-alive使用

源码可以参考 https://github.com/ohoherror/...

在写公共layout时，使用el-tabs，切换菜单，使用keep-alive不能做到缓存

  <el-row>
        <el-col :span="24">
            <el-button @click="loginOut" class="float-right mb-10 ">退出</el-button>
        </el-col>
        <el-col :span="24">
            <el-tabs @tab-click="handleClick" v-model="editableTabsValue" closable type="card" class="demo-tabs"
                @tab-remove="removeTab">
                <el-tab-pane v-for="item in editableTabs" :key="item.menuId" :label="item.name" :name="item.name">
                    <router-view v-slot="{ Component, route }">
                        <keep-alive>
                            <component :is="Component" v-if="(route.meta && route.meta.keepAlive)" :key="router.name" />
                        </keep-alive>
                        <component :is="Component" :key="router.name" v-if="!(route.meta && route.meta.keepAlive)" />
                    </router-view>
                </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>

后来把keep-alive放在app.vue里面就可以做到缓存了

 <div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <div>
      <el-container>
        <el-aside width="200px" v-if="state.showMenu">
          <leftNav></leftNav>
        </el-aside>
        <el-container>
          <el-header v-if="state.showMenu">
            <topNav></topNav>
          </el-header>
          <el-main class="mt-20">
            <router-view v-slot="{ Component, route }">
              <keep-alive>
                <component :is="Component" v-if="(route.meta && route.meta.keepAlive)" :key="router.name" />
              </keep-alive>
              <component :is="Component" :key="router.name" v-if="!(route.meta && route.meta.keepAlive)" />
            </router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>