vue2 动态菜单权限

在Vue 2中实现动态菜单权限控制可以通过以下步骤进行：

1. 定义菜单数据结构：创建一个包含菜单项的数据结构，可以使用对象数组或者树形结构。

2. 获取用户权限：从后端或者其他途径获取当前用户的权限信息。

3. 根据权限过滤菜单：根据用户权限，遍历菜单数据结构，过滤掉用户没有权限的菜单项。

4. 渲染动态菜单：使用Vue的条件渲染指令（v-if或v-show）根据菜单项是否有权限来显示或隐藏对应的菜单项。

以下是一个示例代码片段，展示了如何在Vue 2中实现动态菜单权限控制：

<template>
  <div>
    <ul>
      <li v-for="item in menu" :key="item.id" v-if="hasPermission(item)">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 1, name: 'Home', permission: 'home' },
        { id: 2, name: 'About', permission: 'about' },
        { id: 3, name: 'Contact', permission: 'contact' },
      ],
      userPermissions: ['home', 'contact'], // 假设当前用户拥有的权限
    };
  },
  methods: {
    hasPermission(item) {
      return this.userPermissions.includes(item.permission);
    },
  },
};
</script>

在上述示例中，`menu`数组包含了所有的菜单项，每个菜单项都有一个`permission`属性表示该菜单项的权限。`userPermissions`数组表示当前用户拥有的权限。

通过`v-for`遍历`menu`数组，使用`v-if`指令结合`hasPermission`方法判断当前用户是否有权限访问该菜单项，只有有权限的菜单项才会被渲染出来。

需要注意的是，这只是一个简单的示例，实际应用中可能需要更复杂的权限管理方案。