当前位置：首页 > VUE

vue tab实现

2026-03-27 14:19:14VUE

Vue 实现 Tab 切换的几种方法

使用 v-if 和 v-show 控制显示

通过 v-if 或 v-show 结合点击事件切换不同内容。v-if 会销毁和重建组件，适合动态内容；v-show 仅切换 CSS 显示属性，适合频繁切换的静态内容。

<template>
  <div>
    <div class="tabs">
      <button @click="activeTab = 'tab1'">Tab 1</button>
      <button @click="activeTab = 'tab2'">Tab 2</button>
    </div>
    <div class="content">
      <div v-if="activeTab === 'tab1'">Content 1</div>
      <div v-show="activeTab === 'tab2'">Content 2</div>
    </div>
  </div>
</template>

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

使用动态组件 `<component>`

通过 is 属性动态加载不同组件，适合需要复用独立逻辑的场景。

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">A</button>
    <button @click="currentComponent = 'ComponentB'">B</button>
    <component :is="currentComponent" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  components: { ComponentA, ComponentB },
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  }
}
</script>

使用路由实现 Tab

通过 Vue Router 的嵌套路由实现，适合需要保持 URL 状态的复杂场景。

// router.js
{
  path: '/tabs',
  component: TabsContainer,
  children: [
    { path: 'tab1', component: Tab1 },
    { path: 'tab2', component: Tab2 }
  ]
}

<!-- TabsContainer.vue -->
<template>
  <div>
    <router-link to="/tabs/tab1">Tab 1</router-link>
    <router-link to="/tabs/tab2">Tab 2</router-link>
    <router-view />
  </div>
</template>

使用第三方库

如 vue-tabs-component 提供开箱即用的功能：

vue tab实现

npm install vue-tabs-component

<template>
  <tabs>
    <tab name="First" :selected="true">Content 1</tab>
    <tab name="Second">Content 2</tab>
  </tabs>
</template>

<script>
import { Tabs, Tab } from 'vue-tabs-component'
export default {
  components: { Tabs, Tab }
}
</script>