循序渐进VUE+Element 前端应用开发(17）--- 菜单资源管理

菜单项的组件，是在Layout/Components/Sidebar/Item.vue进行修改，以适应Awesome图标的处理:

render(createElement, context) {

const { icon, title } = context.props

const vnodes = []

if (icon) {

// vnodes.push() // 使用自定义svg图标

// vnodes.push() // 使用内置element图标

vnodes.push()// 使用awesome图标

}

if (title) {

vnodes.push({(title)})

}

return vnodes

}

通过各个地方进行修改，我们就可以使用Awesome的图标集合了。

2、菜单和路由的结合管理

========================================================================

在前面随笔《循序渐进VUE+Element 前端应用开发(3）— 动态菜单和路由的关联处理》我介绍了用户动态配置的菜单资源，结合本系统的所有路由，实现菜单的显示外，还过滤了系统路由，实现可访问路由的管理，两者结合实现了系统有效的菜单和路由的控制。

前端通过接口动态获取菜单列表，通过菜单的名称和路由名称的对应关系，我们以菜单集合为对照，然后过滤本地所有静态路由的列表，然后获得用户可以访问的路由列表，设置动态路由给前端，从而实现了界面根据用户角色/权限的不同，而变化用户的菜单界面和可访问路由集合。

菜单路由处理的大概的操作过程如下所示:

前端界面的动态菜单、本地路由、菜单导航和可访问路由的几个概念如下所示。

在前端界面处理中，我们通过Element界面组件的方式展示动态菜单信息，并结合菜单和路由的关系，实现菜单跳转到对应视图的处理过程。

因此，系统管理里面的菜单信息配置界面中，菜单的Web地址，对应的是系统静态路由的名称，如下界面所示。

之前定义系统的路由信息格式如下所示:

// 定义本系统的所有路由，具体路由呈现经过菜单数据过滤

export const asyncRoutes = {

‘dashboard’: {

path: ‘/dashboard’,

component: Layout,

children: [{

path: ‘dashboard’,

name: ‘dashboard’,

component: () => import(‘@/views/dashboard/index’)

}]

},

‘product’: {

path: ‘/product’,

component: Layout,

children: [{

path: ‘/product’,

name: ‘product’,

component: () => import(‘@/views/Product/index’)

}]

},

… //省略部分

‘icon’: {

path: ‘/icon’,

component: Layout,

children: [{

path: ‘/icon’,

name: ‘icon’,

component: () => import(‘@/views/icons/index’)

}]

},

‘external-link’: {

path: ‘http://www.iqidi.com’,

name: ‘external-link’

}

}

有了这些准备，我们在用户登录系统后，就从后台获取对应的菜单列表。

在系统登录处理过程中，考虑到初始化的时候，如果用户是管理员admin，并且获取用户菜单为空，可以考虑使用预设的静态菜单资源，可以让用户先配置好权限菜单。

// 系统静态菜单

var staticmenus = await GetStaticMenus()

// console.log(menus)

// 如果用户是admin 并且角色集合中没有菜单，则使用静态菜单

var username = store.getters.name // 用户名

if (username === ‘admin’) {

if (!menus || typeof (menus) === ‘undefined’ || menus.length === 0) {

menus = staticmenus // 系统管理员，初始化的时候使用静态菜单

}

}

由于之前开发了一个基于Winform的ABP前端应用，因此我们菜单为了整合两个应用，在菜单表示增加一个一个Tag标签，用来区分是Winform界面的菜单还是Web的菜单，毕竟两者菜单的处理方式是不同的。

addForm: { // 添加表单

id: this.guid(),

pid: ‘’,

name: ‘’,

url: ‘’,

seq: ‘001’,

isTop: false,

expand: 1,

visible: 1,

webIcon: ‘’,

tag: ‘web’// Web专用

},

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！