当前位置：首页 > VUE

vue实现菜单切换

2026-01-16 20:05:28VUE

Vue 实现菜单切换的方法

在 Vue 中实现菜单切换通常涉及动态绑定类名、条件渲染或状态管理。以下是几种常见的方法：

动态绑定 class 实现高亮切换

通过 v-bind:class 动态绑定类名，结合点击事件切换当前选中项：

<template>
  <div>
    <ul>
      <li 
        v-for="item in menuItems" 
        :key="item.id"
        :class="{ 'active': currentItem === item.id }"
        @click="currentItem = item.id"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentItem: 1,
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' },
        { id: 3, name: '关于' }
      ]
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

使用条件渲染切换内容

通过 v-if/v-show 显示不同菜单对应的内容：

<template>
  <div>
    <button @click="currentTab = 'home'">首页</button>
    <button @click="currentTab = 'products'">产品</button>

    <div v-if="currentTab === 'home'">
      首页内容
    </div>
    <div v-else-if="currentTab === 'products'">
      产品内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home'
    }
  }
}
</script>

使用 Vue Router 实现路由菜单

对于多页面应用，推荐使用 Vue Router：

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

const routes = [
  { path: '/', component: Home },
  { path: '/products', component: Products }
]

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

export default router

<!-- App.vue -->
<template>
  <router-link to="/">首页</router-link>
  <router-link to="/products">产品</router-link>
  <router-view></router-view>
</template>

使用组件化方式实现复杂菜单

对于复杂菜单系统，可以拆分为独立组件：

<template>
  <div>
    <Menu :items="menuItems" @select="handleSelect" />
    <Content :current="selectedItem" />
  </div>
</template>

<script>
import Menu from './Menu.vue'
import Content from './Content.vue'

export default {
  components: { Menu, Content },
  data() {
    return {
      selectedItem: null,
      menuItems: [...]
    }
  },
  methods: {
    handleSelect(item) {
      this.selectedItem = item
    }
  }
}
</script>

以上方法可根据项目需求选择或组合使用。对于简单需求，动态 class 绑定足够；对于多页面应用，Vue Router 是最佳选择；复杂菜单系统建议采用组件化方式实现。

vue实现菜单切换