Vue el-tabs使用 keep-alive 不生效

最新推荐文章于 2025-05-10 22:58:27 发布

原创

最新推荐文章于 2025-05-10 22:58:27 发布 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #spring #前端

1、首先在需要缓存的组件中设置name

2、不要在el-tabs里去调用keep-alive 数据的接口，这样肯定会每次点击tab都调用，在组件的 mouted生命周期里面单独调用接口

上代码

HTML

      <div class="activity">
         <div class="cont">
            <el-tabs
              v-if="search && search.length > 0"
              v-model="first"
              @tab-click="handleClick"
            >
               <el-tab-pane
            v-for="(item, index) in search"
            :key="index"
            :label="item.name"
            :name="item.id"
            :lazy="true"
            >
              </el-tab-pane>

    </el-tabs>
         </div>
      </div>
     <keep-alive>
     <ComponenReport :message="hello" :id="f