当前位置：首页 > VUE

vue 实现tab页

2026-01-17 12:13:39VUE

Vue 实现 Tab 页的方法

使用动态组件和 `v-for`

在 Vue 中可以通过动态组件和 v-for 指令实现 Tab 页功能。以下是一个简单的实现方式：

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="currentTab = tab"
        :class="{ active: currentTab === tab }"
      >
        {{ tab }}
      </button>
    </div>
    <div class="tab-content">
      <component :is="currentTabComponent"></component>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: ['Home', 'About', 'Contact'],
      currentTab: 'Home'
    }
  },
  computed: {
    currentTabComponent() {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  },
  components: {
    'tab-home': { template: '<div>Home content</div>' },
    'tab-about': { template: '<div>About content</div>' },
    'tab-contact': { template: '<div>Contact content</div>' }
  }
}
</script>

<style>
.tabs button {
  padding: 8px 16px;
  margin-right: 4px;
  cursor: pointer;
}
.tabs button.active {
  background-color: #42b983;
  color: white;
}
.tab-content {
  padding: 16px;
  border: 1px solid #ddd;
}
</style>

使用 Vue Router

对于更复杂的应用，可以使用 Vue Router 来实现 Tab 页：

<template>
  <div>
    <nav>
      <router-link to="/home" active-class="active">Home</router-link>
      <router-link to="/about" active-class="active">About</router-link>
      <router-link to="/contact" active-class="active">Contact</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import Home from './components/Home.vue'
import About from './components/About.vue'
import Contact from './components/Contact.vue'

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About },
  { path: '/contact', component: Contact },
  { path: '/', redirect: '/home' }
]

const router = new VueRouter({
  routes
})

export default {
  router
}
</script>

<style>
nav a {
  padding: 8px 16px;
  margin-right: 4px;
  text-decoration: none;
}
nav a.active {
  background-color: #42b983;
  color: white;
}
</style>

使用第三方库

如果需要更丰富的功能，可以使用第三方 Tab 组件库，如 Element UI 的 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-tab-pane label="角色管理" name="role">
      角色管理内容
    </el-tab-pane>
  </el-tabs>
</template>

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