当前位置：首页 > VUE

vue 页签实现

2026-02-09 13:07:03VUE

Vue 页签实现方法

在 Vue 中实现页签功能，可以通过动态组件或路由结合状态管理来实现。以下是几种常见的实现方式：

动态组件实现页签

使用 Vue 的动态组件 <component :is="currentTab"> 结合 v-for 渲染页签列表。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.name"
        @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 {
  data() {
    return {
      currentTab: 'Tab1',
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' }
      ]
    };
  },
  components: { Tab1, Tab2 }
};
</script>

<style>
.tabs button.active {
  border-bottom: 2px solid #42b983;
}
</style>

路由实现页签

结合 Vue Router 实现页签，通过 router-view 和嵌套路由管理内容。

// router.js
const routes = [
  {
    path: '/',
    component: () => import('./layouts/TabLayout.vue'),
    children: [
      { path: 'tab1', component: () => import('./views/Tab1.vue') },
      { path: 'tab2', component: () => import('./views/Tab2.vue') }
    ]
  }
];

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

使用状态管理

通过 Vuex 或 Pinia 管理页签状态，实现跨组件共享页签数据。

// store.js (Pinia 示例)
import { defineStore } from 'pinia';

export const useTabStore = defineStore('tabs', {
  state: () => ({
    currentTab: 'Tab1',
    tabs: ['Tab1', 'Tab2']
  }),
  actions: {
    setTab(tab) {
      this.currentTab = tab;
    }
  }
});

<template>
  <button 
    v-for="tab in store.tabs" 
    :key="tab"
    @click="store.setTab(tab)"
    :class="{ active: store.currentTab === tab }"
  >
    {{ tab }}
  </button>
</template>

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

第三方库

使用现成的 Vue 页签组件库（如 vue-tabs 或 element-ui 的 el-tabs）。

vue 页签实现

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

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