当前位置：首页 > VUE

vue实现菜单调用

2026-02-09 13:36:39VUE

Vue 实现菜单调用的方法

基础组件结构

使用 Vue 的组件化特性构建菜单结构。定义一个 Menu 组件和 MenuItem 子组件，通过 v-for 动态渲染菜单项。

<template>
  <ul class="menu">
    <MenuItem 
      v-for="item in menuItems" 
      :key="item.id" 
      :item="item"
      @click="handleClick"
    />
  </ul>
</template>

<script>
import MenuItem from './MenuItem.vue';
export default {
  components: { MenuItem },
  props: ['menuItems'],
  methods: {
    handleClick(item) {
      this.$emit('menu-click', item);
    }
  }
};
</script>

动态路由集成

结合 Vue Router 实现菜单导航功能。在菜单项点击时调用 router.push() 跳转。

// 路由配置
const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
];

// 菜单数据
const menuItems = [
  { id: 1, name: '首页', path: '/home' },
  { id: 2, name: '关于', path: '/about' }
];

状态管理

使用 Vuex 管理菜单的展开/折叠状态，适用于复杂菜单场景。

// store.js
export default new Vuex.Store({
  state: {
    isMenuCollapsed: false
  },
  mutations: {
    toggleMenu(state) {
      state.isMenuCollapsed = !state.isMenuCollapsed;
    }
  }
});

递归菜单实现

对于多级嵌套菜单，采用递归组件实现。

<!-- RecursiveMenu.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <span @click="toggle(item)">{{ item.name }}</span>
      <RecursiveMenu 
        v-if="item.children && item.expanded" 
        :items="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'RecursiveMenu',
  props: ['items'],
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
};
</script>

权限控制

通过 v-if 或自定义指令实现基于权限的菜单可见性控制。

// 指令方式
Vue.directive('permission', {
  inserted(el, binding) {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el);
    }
  }
});

响应式设计

使用 CSS 媒体查询或 Vue 的响应式数据实现移动端适配。

@media (max-width: 768px) {
  .menu {
    flex-direction: column;
  }
}

动画效果

通过 Vue 的 <transition> 组件添加菜单展开动画。

vue实现菜单调用

<transition name="slide">
  <Menu v-show="isMenuVisible" />
</transition>

<style>
.slide-enter-active {
  transition: all 0.3s ease;
}
.slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
</style>