因详情页面，有多个tab选项卡考虑页面多处重复使用，而且有多个页面组成，最终决定使用 组件方式来引用页面。

因 项目采用的UI组件是 element-ui，刚好看到有一个 样式很类似于 tab选项卡，就采用了 element的 tabs组件，可是 没想到问题就是出现 这儿。

错误代码：

<el-tabs class="header-tabs" v-model="activeName" @tab-click="handleClick">
   <el-tab-pane
     v-for="item of tabs"
     :key="item.id"
     :label="item.label"
     :name="item.id"
     :component="item.component"
     lazy
     >
      <keep-alive exclude="ContentManage">
          <component :is="currentComponent" :customeroid="agencyid"></component>
      </keep-alive>
     </el-tab-pane>
</el-tabs>

因为上述采用了 tabs选项卡，而且也使用 v-for循环（没办法，主要是 tabs是动态的），导致 每个页面不仅没有办法 缓存，反而 一直重复发送请求。自己百度了好久，最后没办法寻求帮助，在大佬们 远程帮助下 最终发现的是 tabs下的 v-for导致。

因为 component 写在v-for循环中，每次循环都会 创建一个 对象，导致创建很多的组件，点击一次tabs 循环后的 所有的 component都 发送了请求，每次点击一次后，都会减少一次请求（因为 keep-alive缓存的问题）。

最终解决的方法，不在 element-ui的 tabs组件，自己手写页面，反正样式不复杂。

正确代码

<ul class="tabs-ul">
    <li
        v-for="(item) in currentTabs"
        :key="item.id"
        :class="{ active: tabSelect === item.id }"
        @click.prevent="changetabs(item.id)"
        >
        {{ item.label }}
    </li>
</ul>
<keep-alive exclude="ContentManage">
    <component :is="currentComponent" :customeroid="agencyid"></component>
</keep-alive>

这样的就可以避免创建多个组件，从而不在出现 重复发送请求的bug。
————————————————
版权声明：本文为CSDN博主「foxhuli229」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaohuli_hyr/article/details/106325947