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