vue同个页面二级tab栏切换

这边只是提供一个思路，真正的项目就按需求改一下就可以

用组件跳转：

默认显示的是index组件  要切换组件通过点击tab栏 去动态改变:is   然后点击事件把对应的组件传到"currentComp"变量里面

<template>
  <div class="content flex">
    <!-- 二级tab栏开始 -->
    <div class="flex_row justify_end tab">
      <div class="two_tab justify_between flex_row">
        <div (item, index) in finance :key="item.id" :class="[{ finance_title_active: financeindex == index },'finance_title',]">
          {
   
   {item.text}}
        </div>
      </div>
    </div>
    <!-- 二级tab栏结束 -->

    <!-- 默认显示的子组件 -->
    <index :is="currentComp"></index>
  </div>
</template>

<script>
import Product from "./components/financeProduct.vue";
import Mechanism from "./components/financeMechanism.vue";
import Index from "./components/financeIndex.vue";
export default {
  components: {
    Product,
    Mechanism,
    Index
  },
  name: "index",
  data() {
    return {
      currentComp: "Index",
      financeindex: 0,
      finance: [
        {
          id: 0,
          text: "金融主页",
          comp: "Index"
        },
        {
          id: 1,
          text: "金融产品",
          comp: "Product"
        },
        {
          id: 2,
          text: "金融机构",
          comp: "Mechanism"
        },
      ],
    };
  },
  methods: {
    titleClick(item) {
      this.financeindex = item.id;
      this.currentComp = item.comp;
    },
  }
};
</script>

<style lang="scss" scoped>
.tab {
  width: 100%;
  height: 50px;
  margin-bottom: 38px;
  cursor: pointer;
}

.two_tab {
  height: 100%;
  background-color: #f7f7f7;
  width: 1800px;
  text-align: center;
}

.finance_title {
  font-size: 18px;
  line-height: 50px;
  flex: 1;
  font-weight: 400;
  color: #000000;
}

.finance_title_active {
  background: linear-gradient(180deg, #d8b747 0%, #c49700 100%);
  color: #ffffff;
}
</style>

用子路由跳转：

页面的代码    另外三个子路由就可以按照项目的需求写

<template>
  <div class="content flex">
    <!-- 二级tab栏开始 -->
    <div class="flex_row justify_end tab">
      <div class="two_tab justify_between flex_row">
        <router-link :to="{path: item.path, query: {current: item.id}}"
                     :class="[{ finance_title_active: current == index },'finance_title',]"
                     v-for="(item, index) in finance" :key="item.id" @click.native="current = item.id">
          {
   
   { item.text }}
        </router-link>
      </div>
    </div>
    <!-- 二级tab栏结束 -->
    <!-- 点击切换显示的位置 -->
    <router-view/>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      current: 0,
      finance: [
        {
          id: 0,
          text: "金融主页",
          path: '/financeIndex'
        },
        {
          id: 1,
          text: "金融产品",
          path: '/financeProduct'
        },
        {
          id: 2,
          text: "金融机构",
          path: '/financeMechanism'
        },
      ],
    };
  }
};
</script>

<style lang="scss" scoped>
.tab {
  width: 100%;
  height: 50px;
  margin-bottom: 38px;
  cursor: pointer;
}

.two_tab {
  height: 100%;
  background-color: #f7f7f7;
  width: 1800px;
  text-align: center;
}

.finance_title {
  font-size: 18px;
  line-height: 50px;
  flex: 1;
  font-weight: 400;
  color: #000000;
}

.finance_title_active {
  background: linear-gradient(180deg, #d8b747 0%, #c49700 100%);
  color: #ffffff;
}
</style>

vue-router里面配置

{
      path: '/banking',
      name: 'Banking',
      component: () => import('@/views/banking/index'),
      meta: {
        requireAuth: false,
        title: '金融服务',
        isSide: true
      },
      children: [
        {
          path: '/',
          redirect: '/financeIndex',
          name: 'financeIndex',
          component: () => import('../views/banking/components/financeIndex'),
          meta: {
            requireAuth: false,
            title: '金融主页'
          }
        },
        {
          path: '/financeIndex',
          name: 'financeIndex',
          component: () => import('../views/banking/components/financeIndex'),
          meta: {
            requireAuth: false,
            title: '金融主页'
          }
        },
        {
          path: '/financeProduct',
          name: 'financeProduct',
          component: () => import('../views/banking/components/financeProduct'),
          meta: {
            requireAuth: false,
            title: '金融产品'
          }
        },
        {
          path: '/financeMechanism',
          name: 'financeMechanism',
          component: () => import('../views/banking/components/financeMechanism'),
          meta: {
            requireAuth: false,
            title: '金融机构'
          }
        }
      ]
    },