当前位置：首页 > VUE

vue 实现动态菜单

2026-02-18 23:27:39VUE

实现动态菜单的方法

在Vue中实现动态菜单通常涉及从后端API获取菜单数据，并根据权限或用户角色动态渲染菜单项。以下是几种常见的方法：

使用v-for指令动态渲染菜单

通过v-for指令可以遍历从后端获取的菜单数据，动态生成菜单项。这种方法适合菜单结构相对简单的情况。

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: []
    }
  },
  async created() {
    const response = await fetch('/api/menu')
    this.menuItems = await response.json()
  }
}
</script>

使用递归组件实现多级菜单

对于多级嵌套的菜单结构，可以使用递归组件来实现。这种方法可以处理任意深度的菜单层级。

<template>
  <div>
    <menu-item v-for="item in menuData" :key="item.id" :item="item"></menu-item>
  </div>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: { MenuItem },
  data() {
    return {
      menuData: []
    }
  },
  async created() {
    const response = await fetch('/api/menu')
    this.menuData = await response.json()
  }
}
</script>

MenuItem.vue组件：

<template>
  <div>
    <router-link v-if="!item.children" :to="item.path">{{ item.title }}</router-link>
    <div v-else>
      <div @click="toggle">{{ item.title }}</div>
      <div v-show="isOpen">
        <menu-item 
          v-for="child in item.children" 
          :key="child.id" 
          :item="child"
        ></menu-item>
      </div>
    </div>
  </div>
</template>

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

结合Vuex管理菜单状态

对于需要全局共享的菜单状态，可以使用Vuex进行管理。这种方法适合大型应用，需要多个组件访问菜单数据的情况。

// store/modules/menu.js
const state = {
  menuItems: []
}

const mutations = {
  SET_MENU_ITEMS(state, items) {
    state.menuItems = items
  }
}

const actions = {
  async fetchMenuItems({ commit }) {
    const response = await fetch('/api/menu')
    const items = await response.json()
    commit('SET_MENU_ITEMS', items)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在组件中使用：

<template>
  <div>
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState('menu', ['menuItems'])
  },
  created() {
    this.$store.dispatch('menu/fetchMenuItems')
  }
}
</script>

基于权限过滤菜单项

对于需要根据用户权限动态显示菜单的情况，可以在获取菜单数据后进行过滤。

<template>
  <div>
    <ul>
      <li v-for="item in filteredMenu" :key="item.id">
        <router-link :to="item.path">{{ item.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [],
      userPermissions: ['view_dashboard', 'view_reports']
    }
  },
  computed: {
    filteredMenu() {
      return this.menuItems.filter(item => {
        return this.userPermissions.includes(item.permission)
      })
    }
  },
  async created() {
    const response = await fetch('/api/menu')
    this.menuItems = await response.json()
  }
}
</script>