Vue 如何设置动态菜单

在 Vue 开发中，动态菜单的设置是一个常见且实用的需求，它能根据不同的用户角色、业务逻辑或用户操作，灵活展示不同的菜单选项，提升用户体验和应用的适用性。下面就详细介绍一下 Vue 中设置动态菜单的方法。

需要准备菜单数据。通常将菜单数据存储在一个数组中，每个数组元素代表一个菜单项。菜单项可以是一个对象，包含如 label（菜单显示名称）、path（菜单链接路径）、children（子菜单数组）等属性。例如：

const menuData = [
  {
    label: '首页',
    path: '/'
  },
  {
    label: '产品中心',
    path: '/products',
    children: [
      {
        label: '电子产品',
        path: '/products/electronics'
      },
      {
        label: '家居用品',
        path: '/products/home'
      }
    ]
  }
];

接着，在 Vue 组件中使用 v-for 指令来循环渲染菜单。如果菜单有多层级，就需要递归组件来处理子菜单。创建一个菜单组件，在模板中：

<template>
  <ul>
    <li v-for="item in menuData" :key="item.path">
      <router-link :to="item.path">{{ item.label }}</router-link>
      <sub-menu :menuData="item.children" v-if="item.children && item.children.length > 0"></sub-menu>
    </li>
  </ul>
</template>

<script>
import SubMenu from './SubMenu.vue';

export default {
  components: {
    SubMenu
  },
  data() {
    return {
      menuData: []
    };
  },
  created() {
    // 这里可以从接口获取菜单数据，赋值给 menuData
    this.menuData = [/* 实际数据 */];
  }
};
</script>

其中 SubMenu.vue 组件用于递归渲染子菜单，结构与上述类似。

为了实现动态性，根据不同条件展示不同菜单。可以在获取菜单数据时进行筛选。例如，根据用户角色来筛选菜单：

created() {
  const userRole = this.$store.state.user.role;
  const allMenuData = [/* 完整菜单数据 */];
  this.menuData = allMenuData.filter(item => {
    if (userRole === 'admin') {
      return true;
    }
    // 非管理员角色的过滤逻辑
    return item.isVisibleForNormalUser;
  });
}

通过以上步骤，就能在 Vue 中轻松实现动态菜单的设置。根据具体业务需求，灵活调整数据获取和筛选逻辑，为用户提供个性化的菜单体验。