当前位置：首页 > VUE

vue菜单tab实现

2026-02-11 00:44:02VUE

Vue 菜单 Tab 实现方法

使用 Vue Router 实现路由切换

通过 Vue Router 的 router-link 和 router-view 组件实现 Tab 切换。需要在路由配置中定义每个 Tab 对应的组件路径。

// router/index.js
const routes = [
  { path: '/tab1', component: Tab1Component },
  { path: '/tab2', component: Tab2Component }
]

在模板中使用 router-link 作为 Tab 标签：

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

使用动态组件实现

通过 Vue 的 component 动态组件和 v-bind:is 指令实现 Tab 内容切换，无需路由配置。

<template>
  <div>
    <button @click="currentTab = 'Tab1'">Tab 1</button>
    <button @click="currentTab = 'Tab2'">Tab 2</button>
    <component :is="currentTab"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'Tab1'
    }
  },
  components: {
    Tab1,
    Tab2
  }
}
</script>

使用第三方 UI 库

Element UI、Ant Design Vue 等流行 UI 库都提供了现成的 Tab 组件。

以 Element UI 为例：

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

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

自定义 Tab 组件

完全自定义实现 Tab 组件，通过 CSS 控制样式和交互效果。

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

<script>
export default {
  props: {
    tabs: Array
  },
  data() {
    return {
      currentTab: 0
    }
  }
}
</script>

实现 Tab 动画效果

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

vue菜单tab实现

<transition name="fade" mode="out-in">
  <component :is="currentTab"></component>
</transition>

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

每种方法适用于不同场景，简单需求可使用动态组件或路由方案，复杂项目推荐使用 UI 库提供的组件。自定义实现提供最大灵活性但需要处理更多细节。