vue-element-admin 权限控制中，用户的菜单列表返回的不是路径而是菜单名，该如何与路由菜单对比显示？

在 Vue-element-admin 中，用户的菜单列表通常是由后端返回的，可能是菜单的名称或者 ID 等，并不是路由的路径。为了显示菜单并与路由菜单对比，可以通过以下步骤实现：

1. 在路由配置中为每个路由设置一个唯一的 name 属性，例如：

{
  path: '/dashboard',
  component: () => import('@/views/dashboard/index'),
  name: 'Dashboard',
  meta: { title: 'Dashboard', icon: 'dashboard' }
},

2. 通过递归遍历后端返回的菜单列表，根据每个菜单的名称或 ID 找到对应的路由，并将路由的 name 属性作为菜单的唯一标识。例如：

function generateRoutesFromMenu(menu = [], routes = []) {
  for (let i = 0, l = menu.length; i < l; i++) {
    const item = menu[i]
    if (item.children && item.children.length > 0) {
      generateRoutesFromMenu(item.children, routes)
    } else if (item.name) {
      const route = findRouteByName(routes, item.name)
      if (route) {
        item.name = route.name
      }
    }
  }
}

function findRouteByName(routes = [], name) {
  for (let i = 0, l = routes.length; i < l; i++) {
    const route = routes[i]
    if (route.name === name) {
      return route
    }
    if (route.children) {
      const found = findRouteByName(route.children, name)
      if (found) {
        return found
      }
    }
  }
  return null
}

3. 在菜单组件中使用路由菜单配置生成菜单，通过菜单的唯一标识（即路由的 name 属性）与后端返回的菜单列表对比，并显示对应的菜单项。例如：

<template>
  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" :collapse="collapse">
    <template v-for="item in menu">
      <template v-if="item.children && item.children.length > 0">
        <el-submenu :index="item.name">
          <template slot="title">
            <i :class="item.icon" />
            <span slot="title">{{ item.title }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.name" :index="child.name">{{ child.title }}</el-menu-item>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :index="item.name">
          <i :class="item.icon" />
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script>
export default {
  props: {
    menu: {
      type: Array,
      required: true
    }
  },
  computed: {
    activeMenu() {
      return this.$route.name
    }
  }
}
</script>

通过上述步骤，可以实现根据路由菜单配置和后端返回的菜单列表生成菜单，并将其显示在页面上。