elementui动态路由菜单

### ElementUI 实现动态路由菜单

为了实现在 Vue 中使用 Element UI 组件库创建动态路由菜单，通常会涉及几个核心部分：用户权限验证、从服务器获取菜单数据以及根据这些数据生成对应的路由配置。

#### 获取并解析菜单数据

当用户成功登录后，应用程序应当向服务器发送请求以获得该用户的访问权限列表。此操作可以通过 Axios 或者 Fetch API 完成。一旦接收到响应中的 JSON 数据，则可以根据预定义的逻辑来处理它：

// 假设这是来自服务器的原始菜单数据
const menuData = [
    {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/Home.vue'),
        meta: { title: '首页', icon: 'el-icon-s-home' }
    },
    // 更多路径...
];

上述代码片段展示了如何定义一个简单的菜单项数组 `menuData`[^2]。

#### 创建动态路由函数

接下来需要编写一段 JavaScript 函数用于遍历 `menuData` 并将其转换为适合 Vue Router 的格式。这一步骤可能涉及到递归地构建子级路由对象，并确保每个节点都包含了必要的属性如 `path`, `component`, 和 `children`.

function generateRoutes(menuItems) {
    return menuItems.map(item => ({
        ...item,
        children: item.children ? generateRoutes(item.children) : undefined
    }));
}

这段代码实现了将传入的菜单项目转化为适用于 Vue Router 配置的对象结构的功能[^1]。

#### 将新路由添加至路由器实例

最后，在应用初始化阶段调用上面提到的方法并将返回的结果传递给 Vue Router 的 `.addRoutes()` 方法（对于 Vue Router v3.x 版本），从而完成整个流程:

import router from './router'; // 导入已有的静态路由表

axios.get('/api/user/menus')
     .then(response => {
         const dynamicRoutes = generateRoutes(response.data);
         router.addRoutes(dynamicRoutes); // 对于 Vue Router 3.x 使用 addRoutes()
         
         next({ ...to }); // 如果有未匹配成功的跳转需求, 可在此处重定向
     });

注意：如果是使用 Vue Router 4.x+, 则不再支持直接调用 `addRoutes()`. 此时应该考虑采用编程方式导航或者利用其他机制实现相似效果.

#### 渲染左侧菜单栏

有了完整的路由信息之后就可以轻松地借助 Element UI 提供的各种组件比如 `<el-menu>` 来展示最终的效果了。下面是一个简化版的例子说明怎样把之前准备好的路由映射到可视化的菜单上：

<template>
  <div id="app">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <el-menu default-active="/home" unique-opened router>
        <sidebar-item v-for="(route,i) of routes" :key="i" :item="route"/>
      </el-menu>
    </el-aside>

    <!-- 主要内容区域 -->
    <main class="content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  computed:{
    routes(){
      return this.$router.options.routes.filter(route=>!route.hidden)
    }
  }
};
</script>

在这个模板中，`routes` 计算属性过滤掉了任何带有隐藏标志 (`hidden`) 的路由条目；而自定义组件 `SidebarItem` 负责迭代每一个顶层路由及其潜在的孩子们，进而形成层次分明的菜单体系[^3]。