vue实现tab页

Vue 实现 Tab 页的常见方法

基于动态组件与 v-if 切换

通过 v-if 或 v-show 控制不同 Tab 内容的显示与隐藏，结合点击事件切换当前活跃的 Tab。

<template>
  <div>
    <div class="tab-buttons">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index"
        @click="activeTab = index"
        :class="{ 'active': activeTab === index }"
      >
        {{ tab.title }}
      </button>
    </div>
    <div class="tab-content">
      <div v-if="activeTab === 0">内容 1</div>
      <div v-if="activeTab === 1">内容 2</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Tab 1' },
        { title: 'Tab 2' }
      ],
      activeTab: 0
    };
  }
};
</script>

<style>
.tab-buttons button.active {
  background-color: #42b983;
  color: white;
}
</style>

使用 Vue Router 实现路由级 Tab

适合需要 URL 同步或复杂页面结构的场景，通过路由参数或路径匹配不同 Tab。

<template>
  <div>
    <router-link 
      v-for="(tab, index) in tabs"
      :key="index"
      :to="tab.path"
      active-class="active-tab"
    >
      {{ tab.title }}
    </router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { title: 'Home', path: '/home' },
        { title: 'Profile', path: '/profile' }
      ]
    };
  }
};
</script>

第三方组件库（如 Element UI）

利用现成的 UI 组件快速实现标准化 Tab，减少重复代码。

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

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

关键注意事项

• 性能优化：内容较多时，v-show 比 v-if 更适合（避免重复渲染）。
• 动画效果：可通过 <transition> 组件添加切换动画。
• 状态保持：使用 <keep-alive> 包裹动态组件以缓存 Tab 状态。

扩展功能建议

• 通过 localStorage 保存上次激活的 Tab。
• 支持动态添加/删除 Tab（需配合数组操作）。
• 懒加载 Tab 内容（结合异步组件）。