当前位置：首页 > VUE

vue实现tab导航

2026-02-16 23:25:34VUE

使用 Vue 实现 Tab 导航

基础实现（基于 v-if 和 v-show）

创建一个包含多个 Tab 的组件，通过切换显示不同的内容。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.id"
        :class="{ active: currentTab === tab.id }"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tab-content">
      <div v-if="currentTab === 'tab1'">
        这是 Tab 1 的内容
      </div>
      <div v-if="currentTab === 'tab2'">
        这是 Tab 2 的内容
      </div>
      <div v-if="currentTab === 'tab3'">
        这是 Tab 3 的内容
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'tab1',
      tabs: [
        { id: 'tab1', name: 'Tab 1' },
        { id: 'tab2', name: 'Tab 2' },
        { id: 'tab3', name: 'Tab 3' }
      ]
    }
  }
}
</script>

<style>
.tabs button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: #f0f0f0;
}
.tabs button.active {
  background: #42b983;
  color: white;
}
.tab-content {
  padding: 16px;
  border: 1px solid #ddd;
}
</style>

动态组件方式（使用 `<component :is>`）

利用 Vue 的动态组件特性，使 Tab 内容切换更灵活。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="currentTab = tab.component"
        :class="{ active: currentTab === tab.component }"
      >
        {{ tab.name }}
      </button>
    </div>
    <div class="tab-content">
      <component :is="currentTab" />
    </div>
  </div>
</template>

<script>
import Tab1 from './Tab1.vue'
import Tab2 from './Tab2.vue'
import Tab3 from './Tab3.vue'

export default {
  components: { Tab1, Tab2, Tab3 },
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' },
        { name: 'Tab 3', component: 'Tab3' }
      ]
    }
  }
}
</script>

使用 Vue Router 实现 Tab 导航

如果 Tab 需要结合路由，可以使用 Vue Router 的嵌套路由或动态路由。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Tab1 from './views/Tab1.vue'
import Tab2 from './views/Tab2.vue'
import Tab3 from './views/Tab3.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', redirect: '/tab1' },
    { path: '/tab1', component: Tab1 },
    { path: '/tab2', component: Tab2 },
    { path: '/tab3', component: Tab3 }
  ]
})

在组件中使用 <router-link> 切换 Tab：

<template>
  <div>
    <div class="tabs">
      <router-link to="/tab1" active-class="active">Tab 1</router-link>
      <router-link to="/tab2" active-class="active">Tab 2</router-link>
      <router-link to="/tab3" active-class="active">Tab 3</router-link>
    </div>
    <div class="tab-content">
      <router-view />
    </div>
  </div>
</template>

<style>
.tabs a {
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}
.tabs a.active {
  color: #42b983;
  font-weight: bold;
}
</style>

使用第三方 UI 库（如 Element Plus）

许多 UI 库提供了现成的 Tab 组件，例如 Element Plus 的 el-tabs：

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      这是 Tab 1 的内容
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      这是 Tab 2 的内容
    </el-tab-pane>
    <el-tab-pane label="Tab 3" name="tab3">
      这是 Tab 3 的内容
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'tab1'
    }
  }
}
</script>

以上方法均可实现 Tab 导航，可根据项目需求选择合适的方式。

vue实现tab导航