vue+element项目中多个tabs页调一个接口、多个tabs页调多个接口

1.多个tabs标签页请求同一个接口

2.多个tabs标签页请求多个接口

需求描述：

有三个可切换的tabs页签，红色的两个框里的tabs页签请求的是同一个接口，但是两个页签传递的参数值不一样，橙色的框里请求的是另一个接口。通过点击不同的tabs页签去跳转页面并请求不同的接口返回的数据。默认显示最新知识页签的数据。

**html页面： **

最新知识和热门知识调的是同一个接口，排行榜是一个接口。

接口：

最新知识和热门知识的接口给后端传的参数rankingType（直接传汉字 ）："最新知识" or "热门知识"。排行榜的接口给后端传的参数rankingListType ："下载排行"。

**实现： **

在api文件里新建相关文件存储接口代码

【get请求用拼接】【get请求传参用param、post请求传参用data】

/**
* 最新知识、热门知识
*/
export function knowledgeListDetail(param) {
    return request({
        url: '/api/knowledge/ranking/listDetail?' + 'rankingType=' + param.rankingType,
        headers: {
            isToken: true,
            'Access-Control-Allow-Origin':'*', 
        },
        method: 'get',
    })
}

/**
* 排行榜
*/
export function rankingListDetail(param) {
    return request({
        url: '/api/knowledge/rankingList/listDetail?' + 'rankingListType=' + param.rankingListType,
        headers: {
            isToken: true,
            'Access-Control-Allow-Origin':'*', 
        },
        method: 'get', 
    })
}

在html引入element组件里tabs页签的代码，根据具体需求更改代码。

<template>
<!-- 最新知识 S -->
          <div
            class="text-bar know"
            style="display: flex; justify-content: space-between"
          >
            <div class="tabs" style="width: 95%">
              <el-tabs
                v-model="activeNameLatestKnowledge"
                @tab-click="handleLatestKnowledge"
              >

                <el-tab-pane label="最新知识" name="latestKnowledgeFirst">
                  <div class="list">
                    <div
                      class="flex list-item"
                      v-for="(item, index) in latestKnowledgeRows"
                      :key="index"
                    >
                      <div class="title">
                        <div
                          @click="jump('/special/detailed')"
                          style="vertical-align: middle"
                        >
                          <img
                            style="vertical-align: middle"
                            src="../../assets/file.png"
                            alt=""
                          />
                          {{ item.title }}
                        </div>
                        <div class="msg">{{ item.releaseTime }}</div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="热门知识" name="latestKnowledgeSecond">
                  <div class="list">
                    <div
                      class="list-item flex"
                      v-for="(item, index) in popularKnowledgeRows"
                      :key="index"
                    >
                      <div class="flex title">
                        <div
                          @click="jump('/special/detailed')"
                          style="vertical-align: middle"
                        >
                          <img
                            style="vertical-align: middle"
                            src="../../assets/file.png"
                            alt=""
                          />
                          {{ item.title }}
                        </div>
                        <div class="msg">{{ item.releaseTime }}</div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="排行榜" name="latestKnowledgeSecondThird">
                  <div class="list">
                    <div
                      class="list-item flex"
                      v-for="(item, index) in rankingListRows"
                      :key="index"
                    >
                      <div class="flex title">
                        <div
                          @click="jump('/special/detailed')"
                          style="vertical-align: middle"
                        >
                          <img
                            style="vertical-align: middle"
                            src="../../assets/file.png"
                            alt=""
                          />
                          {{ item.title }}
                        </div>
                        <div class="msg">{{ item.releaseTime }}</div>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div style="margin-top: 30px">
              <el-link
                class="title-msg"
                :underline="false"
                @click="jump('/strategyThinkManage')"
                >更多 <i class="el-icon-arrow-right"></i
              ></el-link>
            </div>
          </div>
          <!-- 最新知识 E -->
</template>

<script>
export default {
  data() {
    return {      
      activeNameLatestKnowledge: "latestKnowledgeFirst", // 默认显示最新知识数据页面
      latestKnowledgeRows: [], // 最新知识数据
      popularKnowledgeRows: [], //热门知识数据
      rankingListRows: [], //排行榜数据      
    };
  },
}
</script>

引入api

import { knowledgeListDetail, rankingListDetail } from "@/api/home.js";

在methods通过if判断（if...else语句）去进行接口调试。

在created里调用接口（一点击直接出现此页签的数据）

<script>
export default { 
 methods: {
 /***
  *  最新知识、热门知识、排行榜
  */
    handleLatestKnowledge(tab) {
      if (tab.name != "latestKnowledgeSecondThird") {
        if (tab.name == "latestKnowledgeFirst") {
          let rows = {
            rankingType: "最新知识",
          };
          knowledgeListDetail(rows).then((res) => {
            if (res.rows) {
              // 渲染数据
              this.latestKnowledgeRows = res.rows;
            }
          });
        } else {
          let rows = {
            rankingType: "热门知识",
          };
          knowledgeListDetail(rows).then((res) => {
            if (res.rows) {
              this.popularKnowledgeRows = res.rows;
            }
          });
        }
      } else {
        let rows = {
          rankingListType: "下载排行",
        };
        rankingListDetail(rows).then((res) => {
          if (res.rows) {
            this.rankingListRows = res.rows;
          }
        });
      }
    },

 created() {
    this.handleLatestKnowledge({ name: "latestKnowledgeFirst" });
  },
};
</script>