当前位置：首页 > VUE

vue 实现菜单

2026-01-07 07:45:25VUE

Vue 实现菜单的方法

使用 Vue 实现菜单可以通过多种方式，以下是几种常见的方法：

使用 Vue Router 实现动态路由菜单

通过 Vue Router 可以动态生成菜单，根据路由配置自动渲染导航项。

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

// Menu.vue
<template>
  <div>
    <router-link v-for="route in routes" :key="route.path" :to="route.path">
      {{ route.name }}
    </router-link>
  </div>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes
    }
  }
}
</script>

使用组件库实现菜单

Element UI 或 Ant Design Vue 等组件库提供了现成的菜单组件。

// 使用 Element UI
<template>
  <el-menu mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

自定义递归菜单组件

对于多级菜单，可以创建递归组件处理嵌套结构。

// MenuItem.vue
<template>
  <div>
    <div @click="toggle">
      {{ item.name }}
    </div>
    <div v-show="isOpen" v-if="item.children">
      <menu-item 
        v-for="child in item.children" 
        :key="child.id" 
        :item="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: ['item'],
  data() {
    return {
      isOpen: false
    }
  },
  methods: {
    toggle() {
      this.isOpen = !this.isOpen
    }
  }
}
</script>

响应式菜单实现

结合 Vue 的响应式特性，可以根据屏幕尺寸切换菜单样式。

<template>
  <div>
    <button @click="toggleMenu">菜单</button>
    <div :class="{ 'show': isMenuOpen }">
      <nav>
        <a href="#">首页</a>
        <a href="#">关于</a>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style>
.show {
  display: block;
}
</style>

菜单状态管理

对于复杂应用，可以使用 Vuex 管理菜单状态。

// store/modules/menu.js
const state = {
  isCollapsed: false
}

const mutations = {
  TOGGLE_MENU(state) {
    state.isCollapsed = !state.isCollapsed
  }
}

// Menu.vue
<template>
  <div :class="{ 'collapsed': $store.state.menu.isCollapsed }">
    <!-- 菜单内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    toggleMenu() {
      this.$store.commit('TOGGLE_MENU')
    }
  }
}
</script>

菜单权限控制

根据用户角色动态渲染菜单项。

<template>
  <div>
    <template v-for="item in menuItems">
      <router-link 
        v-if="hasPermission(item.roles)" 
        :key="item.path" 
        :to="item.path"
      >
        {{ item.name }}
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  computed: {
    menuItems() {
      return [
        { path: '/dashboard', name: '仪表盘', roles: ['admin', 'user'] },
        { path: '/admin', name: '管理', roles: ['admin'] }
      ]
    }
  },
  methods: {
    hasPermission(requiredRoles) {
      const userRoles = ['user'] // 从store或API获取
      return requiredRoles.some(role => userRoles.includes(role))
    }
  }
}
</script>

这些方法涵盖了从简单到复杂的各种菜单实现场景，可以根据具体需求选择合适的方式。

vue 实现菜单