关于vue3:vue3-keepalive使用

源码能够参考 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>