VUE根据权限设置菜单不可见

在 Vue 中根据权限设置菜单不可见，可以通过以下步骤实现：

1. 首先，在组件中定义菜单的数据源，包括菜单名称、菜单路径、菜单图标等信息。

2. 在组件中定义用户的权限信息，可以是一个数组，也可以是一个对象，包含用户所具有的权限信息。

3. 在菜单组件中使用 `v-for` 循环渲染菜单列表，同时使用 `v-if` 判断当前用户是否有访问该菜单的权限，如果没有权限，则不渲染该菜单。

例如，我们可以定义一个 `menuList` 数组，包含多个菜单对象：

menuList: [
  { name: '首页', path: '/', icon: 'home' },
  { name: '用户管理', path: '/user', icon: 'user' },
  { name: '订单管理', path: '/order', icon: 'shopping-cart' },
  { name: '商品管理', path: '/product', icon: 'shop' }
]

然后，我们可以定义一个 `userPermissions` 对象，包含当前用户所具有的权限信息：

userPermissions: {
  user: true,
  order: false,
  product: true
}

最后，在菜单组件中使用 `v-for` 循环渲染菜单列表，并使用 `v-if` 判断当前用户是否有访问该菜单的权限：

<ul>
  <li v-for="menu in menuList" v-if="userPermissions[menu.path.replace('/', '')]">
    <router-link :to="menu.path">
      <i :class="'iconfont icon-' + menu.icon"></i>
      {{ menu.name }}
    </router-link>
  </li>
</ul>

在上面的代码中，我们使用 `v-if` 判断当前用户是否有访问菜单的权限，通过 `menu.path.replace('/', '')` 将菜单路径转换为对应的权限属性名，然后使用 `userPermissions[...]` 判断该权限是否为 `true`，如果是，则渲染该菜单。