介绍

在Vue.js开发中，使用Vue-element-admin框架可以轻松快速搭建出功能齐全的后台管理系统。通常，后台管理系统需要根据用户权限来动态生成菜单路由，以便用户可以根据自身权限进行相应的操作。本文将介绍如何利用Vue-element-admin框架实现后台接口返回路由，并在前端根据这些路由数据动态生成菜单。

实现步骤

1. 后台接口返回路由数据

首先，我们需要在后台接口中返回路由数据。这些路由数据应该包含相应的路由路径、组件名称、显示名称等信息。可以使用JSON格式进行返回，例如：

{
  "routes": [
    {
      "path": "/dashboard",
      "component": "Dashboard",
      "name": "Dashboard",
      "meta": {
        "title": "首页",
        "icon": "el-icon-s-home"
      }
    },
    {
      "path": "/user",
      "component": "User",
      "name": "User",
      "meta": {
        "title": "用户管理",
        "icon": "el-icon-user"
      }
    },
    ...
  ]
}

2. 前端动态生成路由菜单

接下来，在前端中利用Vue-element-admin框架动态生成菜单路由。可以使用vue-router来进行路由配置。在src/router/index.js文件中，先引入路由使用的组件：

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

然后定义一个函数来根据后台返回的路由数据生成动态路由：

export function generateRoutes(routes) {
  const asyncRoutes = routes.map(route => {
    const {
      path,
      component,
      name,
      meta
    } = route
    return {
      path: path,
      component: path === '/dashboard' ? Layout : () => import(`@/views/${component}`),
      name: name,
      meta: meta
    }
  })
  return asyncRoutes
}

在路由配置中调用该函数来生成动态路由：

export function buildRouter(asyncRoutes) {
  const createRouter = () => new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: constantRoutes.concat(asyncRoutes)
  })

  const router = createRouter()

  return router
}

3. 在页面中显示动态生成菜单

最后，在页面中展示动态生成的菜单。可以在src/layout/components/Sidebar组件中进行菜单的渲染。首先，引入router和asyncRoutes：

import { asyncRoutes } from '@/router'
import { generateRoutes } from '@/utils/generateRoutes'

然后，根据后台返回的动态路由数据生成菜单列表：

export default {
  name: 'Sidebar',
  components: {
    ...
  },
  computed: {
    menuList() {
      return generateRoutes(asyncRoutes)
    }
  },
  ...
}

最后，在模板中循环渲染菜单列表：

<template>
  <div>
    <el-menu>
      <el-menu-item v-for="route in menuList" :key="route.path" :index="route.path">
        <svg-icon :icon-class="route.meta.icon"></svg-icon>
        <span slot="title">{{ route.meta.title }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

总结

通过以上步骤，我们成功实现了Vue-element-admin框架中后台接口返回路由数据，并在前端动态生成菜单的功能。这大大提高了开发效率，同时也方便了后台管理系统的维护和拓展。希望本文对于你理解如何实现此功能有所帮助。如有疑问，欢迎留言交流！

本文来自极简博客，作者：紫色迷情，转载请注明原文链接：Vue-element-admin实现后台接口返回路由，前端动态生成路由菜单