当前位置：首页 > VUE

vue实现tab导航

2026-03-08 11:23:22VUE

Vue实现Tab导航的方法

使用v-for动态生成Tab

通过v-for循环生成Tab标签，结合v-bind绑定动态class控制选中状态。利用v-show或v-if切换内容显示。

<template>
  <div class="tab-container">
    <div class="tab-header">
      <div 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ 'active': currentTab === index }"
        @click="currentTab = index"
      >
        {{ tab.title }}
      </div>
    </div>
    <div class="tab-content">
      <div v-for="(tab, index) in tabs" :key="index" v-show="currentTab === index">
        {{ tab.content }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content 1' },
        { title: 'Tab 2', content: 'Content 2' },
        { title: 'Tab 3', content: 'Content 3' }
      ]
    }
  }
}
</script>

<style>
.tab-header div {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
}
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用组件化方式

将Tab封装为可复用组件，通过插槽分发内容。父组件控制当前激活的Tab。

vue实现tab导航

<!-- Tab.vue -->
<template>
  <div>
    <div class="tabs">
      <button
        v-for="(tab, index) in tabs"
        :key="index"
        @click="selectTab(index)"
        :class="{ 'active': currentTab === index }"
      >
        {{ tab }}
      </button>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: Array,
    initialTab: Number
  },
  data() {
    return {
      currentTab: this.initialTab || 0
    }
  },
  methods: {
    selectTab(index) {
      this.currentTab = index
    }
  }
}
</script>

使用路由实现Tab

结合Vue Router实现基于路由的Tab导航，适合需要URL同步的场景。

vue实现tab导航

const routes = [
  { path: '/tab1', component: Tab1 },
  { path: '/tab2', component: Tab2 },
  { path: '/tab3', component: Tab3 }
]

<router-link to="/tab1">Tab 1</router-link>
<router-link to="/tab2">Tab 2</router-link>
<router-link to="/tab3">Tab 3</router-link>
<router-view></router-view>

使用第三方库

对于更复杂的需求，可以考虑使用现成的UI库如Element UI、Ant Design Vue等提供的Tab组件。

<el-tabs v-model="activeTab">
  <el-tab-pane label="Tab 1" name="first">Content 1</el-tab-pane>
  <el-tab-pane label="Tab 2" name="second">Content 2</el-tab-pane>
</el-tabs>

动画过渡效果

为Tab切换添加过渡动画，提升用户体验。

<transition name="fade" mode="out-in">
  <div v-for="(tab, index) in tabs" :key="index" v-show="currentTab === index">
    {{ tab.content }}
  </div>
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>