介绍

Vue-element-admin是一个基于Vue.js和Element UI的开源管理系统模板，它提供了丰富的组件和功能，使得开发人员可以快速搭建和开发后台管理应用程序。

本文将介绍如何使用动态菜单功能，通过在Vue-element-admin中添加和管理动态菜单，实现根据用户权限动态展示菜单功能。

步骤

安装依赖

首先，我们需要确保已经安装了Node.js和npm，然后使用以下命令安装vue-element-admin：

npm install -g @vue/cli
vue create vue-element-admin
cd vue-element-admin
npm install

添加动态菜单数据

在Vue-element-admin的src目录中，我们可以找到菜单配置文件src/utils/menu.js。打开该文件，我们可以看到默认的静态菜单数据。我们需要将其替换为动态菜单数据。

首先，我们需要从后端接口获取动态菜单数据。可以使用axios等库发送HTTP请求来获取数据。以下是一个示例：

import axios from 'axios'

export const getMenuData = () => {
  return axios.get('/api/menu').then(res => {
    return res.data
  }).catch(error => {
    throw new Error('Failed to fetch menu data')
  })
}

然后，我们可以在created钩子函数中获取并设置菜单数据：

import { getMenuData } from '@/api/menu'

export default {
  data() {
    return {
      menuData: []
    }
  },
  created() {
    getMenuData().then(data => {
      this.menuData = data
    }).catch(error => {
      console.error(error)
    })
  }
}

接下来，我们需要使用动态菜单数据来替换菜单配置文件中的默认数据。我们可以通过以下方式更新菜单数据：

import { getMenuData } from '@/api/menu'

export const asyncRoutes = []

export const constantRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      // ...
    ]
  },
  // ...
]

export const updateMenuData = () => {
  getMenuData().then(data => {
    asyncRoutes.splice(0)
    asyncRoutes.push(...data)
  }).catch(error => {
    console.error(error)
  })
}

动态渲染菜单

在Vue-element-admin中，菜单是通过vue-router来管理的。我们可以在src/router/index.js文件中找到菜单渲染的代码。

首先，我们需要在src/router/async.js文件中导入动态菜单数据：

import { asyncRoutes } from '@/router/index'

然后，我们可以添加一个方法，通过递归方式动态生成菜单路由：

const generateRoutes = (routes, data) => {
  data.forEach(item => {
    const route = {
      path: item.path,
      component: item.component,
      redirect: item.redirect,
      name: item.name,
      meta: item.meta || {}
    }

    if (item.children) {
      route.children = [];
      generateRoutes(route.children, item.children)
    }

    routes.push(route);
  });
}

最后，我们可以在src/router/async.js文件中调用该方法生成菜单路由：

generateRoutes(asyncRoutes, menuData)

更新菜单数据

如果我们的动态菜单数据经常发生变化，我们还需要在一定的时间间隔后重新获取菜单数据。可以使用Vue的定时器或者WebSocket来实现。以下是一个示例：

import { updateMenuData } from '@/api/menu'

setInterval(() => {
  updateMenuData()
}, 600000) // 每10分钟更新一次菜单数据

结论

通过在Vue-element-admin中使用动态菜单，我们可以根据用户权限动态展示菜单功能。我们首先需要从后端接口获取动态菜单数据，然后使用菜单数据替换静态菜单配置文件。最后，我们需要在路由配置中动态生成菜单路由。

希望这篇文章对你理解Vue-element-admin的动态菜单功能有所帮助！

参考链接

• Vue-element-admin官方文档
• Vue.js官方文档
• Element UI官方文档

本文来自极简博客，作者：时光旅行者酱，转载请注明原文链接：Vue-element-admin如何使用动态菜单