vue实现页面tab

Vue 实现页面 Tab 的方法

使用动态组件 <component :is>

通过 Vue 的动态组件功能，结合 v-for 和 v-if 可以快速实现 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>
    <component :is="currentTab" />
  </div>
</template>

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

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

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

使用 Vue Router 实现路由级 Tab

对于需要 URL 同步的 Tab，可以通过 Vue Router 的路由参数实现。

// router.js
const routes = [
  { path: '/tabs/:tabId', component: TabsContainer }
]

<template>
  <router-link 
    v-for="tab in tabs" 
    :key="tab.id"
    :to="`/tabs/${tab.id}`"
  >
    {{ tab.name }}
  </router-link>
  <router-view />
</template>

使用第三方库

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

<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="用户管理" name="user">
      用户管理内容
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="config">
      配置管理内容
    </el-tab-pane>
  </el-tabs>
</template>

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

状态管理方案

对于复杂应用，建议将 Tab 状态存储在 Vuex 中：

// store.js
state: {
  activeTab: 'home'
},
mutations: {
  setActiveTab(state, tab) {
    state.activeTab = tab
  }
}

<button @click="$store.commit('setActiveTab', 'profile')">
  切换至个人资料
</button>

动画过渡效果

为 Tab 切换添加过渡动画：

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

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