当前位置：首页 > VUE

vue 页签实现

2026-01-07 01:37:34VUE

Vue 页签实现方法

在 Vue 中实现页签功能通常涉及动态组件、路由或状态管理。以下是几种常见的实现方式：

使用动态组件

通过 Vue 的 <component> 动态组件结合 v-for 和 v-model 实现页签切换：

<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>
export default {
  data() {
    return {
      tabs: [
        { name: 'Tab 1', component: 'Tab1Content' },
        { name: 'Tab 2', component: 'Tab2Content' }
      ],
      currentTab: 'Tab1Content'
    };
  },
  components: {
    Tab1Content: { template: '<div>Content for Tab 1</div>' },
    Tab2Content: { template: '<div>Content for Tab 2</div>' }
  }
};
</script>

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

结合 Vue Router

若页签需要与路由关联，可通过 router-view 和嵌套路由实现：

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

<!-- TabsContainer.vue -->
<template>
  <div>
    <router-link 
      v-for="tab in tabs" 
      :key="tab.path" 
      :to="`/tabs/${tab.path}`"
      active-class="active"
    >
      {{ tab.name }}
    </router-link>
    <router-view />
  </div>
</template>

使用状态管理（如 Pinia/Vuex）

对于复杂状态共享的页签，可通过状态管理库集中管理激活状态：

// store.js (Pinia 示例)
export const useTabStore = defineStore('tabs', {
  state: () => ({
    activeTab: 'home'
  }),
  actions: {
    setActiveTab(tab) {
      this.activeTab = tab;
    }
  }
});

<template>
  <button @click="store.setActiveTab('home')">Home</button>
  <button @click="store.setActiveTab('profile')">Profile</button>
  <div v-if="store.activeTab === 'home'">Home Content</div>
  <div v-else>Profile Content</div>
</template>

<script setup>
import { useTabStore } from './store';
const store = useTabStore();
</script>