使用动态组件tabs.打开新的tab页之前的tab页都会重新发起请求

最新推荐文章于 2024-06-05 11:20:46 发布

原创最新推荐文章于 2024-06-05 11:20:46 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文针对Element UI中Tabs组件在Vue项目中的使用问题进行探讨。当需要实现固定首页和菜单栏并支持动态添加Tab页时，点击Tab会导致所有页面重新渲染及不必要的请求发起。通过结合v-if和keep-alive特性，可以有效避免重复加载，提高用户体验。

vue项目踩坑-使用动态组件tabs.打开新的tab页之前的tab页都会重新发起请求

element-ui中的tabs每次点击时都会给所有页面重新渲染。
项目要求是首页和菜单栏是固定的,菜单每点一个多出一个tab页

  <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      @tab-remove="removeTab"
    >
      <el-tab-pane label="首页" name="home">//固定的首页
        <Home />
      </el-tab-pane>
      <el-tab-pane label="全部功能" name="config">//固定的全部功能页
        <div class="config">
          <Config @changeActiveName="changeActiveName" />
        </div>
      </el-tab-pane>
      <!-- 动态增加的标签页 -->
      <el-tab-pane
        closable
        v-for="menu in componentMenuArr"
        :label="menu.Name"
        :key="menu.Name + '&' + menu.Index"
        :name="menu.Name + '&' + menu.Index"
      >
        <keep-alive>
          <component
            v-if="menu.Name + '&' + menu.Index === activeName"//v-if让之前的tab页不再重新加载
            :is="componentName"
            :funcId="menu.Id"
            :activeName="activeName"
            :fullName="menu.Name + '&' + menu.Index"
            :comCode="menu.Code"
            :comIndex="menu.Index"
            :comName="menu.Name"
            @changeActiveName="changeActiveName"
          ></component>
        </keep-alive>
      </el-tab-pane>
    </el-tabs>