当前位置：首页 > VUE

vue菜单tab实现

2026-03-28 10:45:59VUE

Vue 菜单 Tab 实现方法

使用 Vue Router 实现路由切换

在 Vue 项目中可以通过 Vue Router 实现菜单 Tab 的切换功能。需要配置路由信息并在组件中使用 <router-link> 或编程式导航。

// router/index.js
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

<!-- 在组件中使用 -->
<router-link to="/home" active-class="active">首页</router-link>
<router-link to="/about" active-class="active">关于</router-link>

使用动态组件实现 Tab 切换

通过 Vue 的动态组件 <component :is="currentTab"> 可以实现不依赖路由的 Tab 切换。

vue菜单tab实现

data() {
  return {
    currentTab: 'Home',
    tabs: ['Home', 'About']
  }
}

<button 
  v-for="tab in tabs"
  :key="tab"
  @click="currentTab = tab"
  :class="{ active: currentTab === tab }"
>
  {{ tab }}
</button>

<component :is="currentTab" />

使用第三方 UI 库

Element UI、Ant Design Vue 等流行 UI 库都提供了现成的 Tab 组件。

vue菜单tab实现

<!-- Element UI 示例 -->
<el-tabs v-model="activeName">
  <el-tab-pane label="首页" name="first">内容1</el-tab-pane>
  <el-tab-pane label="关于" name="second">内容2</el-tab-pane>
</el-tabs>

data() {
  return {
    activeName: 'first'
  }
}

自定义 Tab 组件

可以完全自定义 Tab 组件，实现更灵活的控制和样式。

<div class="tabs">
  <div 
    v-for="tab in tabs"
    :key="tab.name"
    @click="selectTab(tab)"
    :class="{ 'active': activeTab === tab.name }"
  >
    {{ tab.label }}
  </div>
</div>

<div class="tab-content">
  <slot name="content"></slot>
</div>

props: {
  tabs: Array,
  defaultActive: String
},
data() {
  return {
    activeTab: this.defaultActive
  }
},
methods: {
  selectTab(tab) {
    this.activeTab = tab.name
    this.$emit('tab-change', tab)
  }
}

保持 Tab 状态

使用 Vuex 或 localStorage 可以保持 Tab 的选中状态，在页面刷新后仍然保持当前选中的 Tab。

// 使用 Vuex
computed: {
  activeTab: {
    get() {
      return this.$store.state.activeTab
    },
    set(value) {
      this.$store.commit('setActiveTab', value)
    }
  }
}

以上方法可以根据项目需求选择使用，Vue Router 适合需要 URL 同步的场景，动态组件适合简单的页面内切换，UI 库组件可以快速实现标准化效果，自定义组件则提供最大的灵活性。