Vue switch between the second level tab bar on the same page

This is just to provide an idea, the real project can be changed according to the needs

Jump with components:

The default display is the index component. To switch components, click the tab bar to dynamically change: is and then click the event to transfer the corresponding component to the "currentComp" variable.

<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>

Use sub-routes to jump:

The code of the page The other three sub-routes can be written according to the needs of the project

<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>

Configuration in 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: '金融机构'
          }
        }
      ]
    },