当前位置：首页 > VUE

vue实现tabbar切换内容

2026-01-20 14:45:08VUE

Vue 实现 TabBar 切换内容

在 Vue 中实现 TabBar 切换内容可以通过动态组件或条件渲染实现。以下是两种常见方法：

动态组件实现

使用 Vue 的 <component> 动态组件结合 v-bind:is 实现内容切换：

<template>
  <div>
    <div class="tab-bar">
      <button 
        v-for="tab in tabs" 
        :key="tab.name" 
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>
    <component :is="currentTabComponent"></component>
  </div>
</template>

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

export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
        { name: 'Home', label: '首页' },
        { name: 'About', label: '关于' },
        { name: 'Contact', label: '联系' }
      ]
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab
    }
  },
  components: {
    Home,
    About,
    Contact
  }
}
</script>

<style>
.tab-bar button {
  padding: 8px 16px;
  margin-right: 4px;
}
.tab-bar button.active {
  background-color: #42b983;
  color: white;
}
</style>

条件渲染实现

使用 v-if/v-else-if 实现条件渲染：

<template>
  <div>
    <div class="tab-bar">
      <button 
        v-for="tab in tabs" 
        :key="tab.name" 
        @click="currentTab = tab.name"
        :class="{ active: currentTab === tab.name }"
      >
        {{ tab.label }}
      </button>
    </div>

    <Home v-if="currentTab === 'Home'" />
    <About v-else-if="currentTab === 'About'" />
    <Contact v-else />
  </div>
</template>

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

export default {
  data() {
    return {
      currentTab: 'Home',
      tabs: [
        { name: 'Home', label: '首页' },
        { name: 'About', label: '关于' },
        { name: 'Contact', label: '联系' }
      ]
    }
  },
  components: {
    Home,
    About,
    Contact
  }
}
</script>

路由实现方案

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

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系</router-link>
  </nav>
  <router-view></router-view>
</template>