关于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>