当前位置：首页 > VUE

Vue实现菜单标签页

2026-01-20 06:27:53VUE

Vue 实现菜单标签页的方法

使用 Vue Router 和动态组件

在 Vue 中实现菜单标签页可以通过结合 Vue Router 和动态组件的方式完成。Vue Router 用于管理路由，动态组件则用于切换不同的标签页内容。

Vue实现菜单标签页

<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" class="tab-content"></component>
  </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 {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.tabs button {
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  background: #eee;
}
.tabs button.active {
  background: #ddd;
  font-weight: bold;
}
.tab-content {
  border: 1px solid #ddd;
  padding: 20px;
}
</style>

结合 Vue Router 实现路由标签页

如果标签页需要与路由关联，可以使用 Vue Router 的嵌套路由或命名视图功能。

Vue实现菜单标签页

// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Tab1 from './views/Tab1.vue';
import Tab2 from './views/Tab2.vue';

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

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

export default router;

// TabsLayout.vue
<template>
  <div>
    <router-link to="/tab1" class="tab-link">Tab 1</router-link>
    <router-link to="/tab2" class="tab-link">Tab 2</router-link>
    <router-view></router-view>
  </div>
</template>

<style>
.tab-link {
  margin-right: 10px;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}
.tab-link.router-link-active {
  font-weight: bold;
  color: #42b983;
}
</style>

使用第三方库

对于更复杂的需求，可以使用第三方库如 vue-tabs-component 或 element-ui 的标签页组件。

// 使用 element-ui 的标签页
<template>
  <el-tabs v-model="activeTab">
    <el-tab-pane label="Tab 1" name="tab1">
      <Tab1 />
    </el-tab-pane>
    <el-tab-pane label="Tab 2" name="tab2">
      <Tab2 />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { ElTabs, ElTabPane } from 'element-ui';
import Tab1 from './Tab1.vue';
import Tab2 from './Tab2.vue';

export default {
  components: {
    ElTabs,
    ElTabPane,
    Tab1,
    Tab2
  },
  data() {
    return {
      activeTab: 'tab1'
    };
  }
};
</script>

动态添加和关闭标签页

如果需要支持动态添加和关闭标签页，可以通过维护一个标签页列表来实现。

<template>
  <div>
    <div class="tabs">
      <button 
        v-for="(tab, index) in tabs" 
        :key="index" 
        @click="switchTab(index)"
        :class="{ active: currentTabIndex === index }"
      >
        {{ tab.name }}
        <span @click.stop="closeTab(index)">×</span>
      </button>
      <button @click="addTab">+</button>
    </div>
    <component :is="tabs[currentTabIndex].component"></component>
  </div>
</template>

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

export default {
  data() {
    return {
      currentTabIndex: 0,
      tabs: [
        { name: 'Tab 1', component: 'Tab1' },
        { name: 'Tab 2', component: 'Tab2' }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentTabIndex = index;
    },
    closeTab(index) {
      this.tabs.splice(index, 1);
      if (this.currentTabIndex >= index) {
        this.currentTabIndex = Math.max(0, this.currentTabIndex - 1);
      }
    },
    addTab() {
      this.tabs.push({ name: `Tab ${this.tabs.length + 1}`, component: 'Tab1' });
      this.currentTabIndex = this.tabs.length - 1;
    }
  },
  components: {
    Tab1,
    Tab2
  }
};
</script>