Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由） |
您所在的位置：网站首页 › 前端怎么实现动态菜单栏功能 › Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由） |
Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由）
|
在后台管理系统中，常常会因为不同的权限，展现不同的菜单。但这仅仅是显示控制，而我们要做的是没有的菜单权限，直接输入URL也不可访问，真正的实现菜单权限控制。 一、动态菜单显示 1. 后端返回的菜单数据处理后端返回的菜单数据一般有两种，处理好的树状结构、或者未处理的列表数据（这种情况需要我们去转换成树状结构，可看我的另外一篇博客【js树形结构操作】）。 下面是后端返回的数据： [ { "id": "1", "pid": "0", "name": "工作台", "url": "/dashboard", "icon": "el-icon-s-platform", "children": [] }, { "id": "2", "pid": "0", "name": "教务管理", "icon": "el-icon-s-opportunity", "children": [ { "id": "21", "pid": "2", "name": "学员中心", "url": "/educate/student" }, { "id": "22", "pid": "2", "name": "班级管理", "url": "/educate/class" }, { "id": "23", "pid": "2", "name": "课程管理", "url": "/educate/course" }, { "id": "24", "pid": "2", "name": "课表管理", "url": "/educate/table" } ] }, { "id": "3", "pid": "0", "name": "系统设置", "icon": "el-icon-s-opportunity", "children": [ { "id": "31", "pid": "3", "name": "基础信息", "url": "/setting/base" }, { "id": "32", "pid": "3", "name": "职员管理", "url": "/setting/user" }, { "id": "33", "pid": "3", "name": "岗位管理", "url": "/setting/role" } ] }, ... ]拿到后端的数据后，使用Vuex管理这些菜单数据。 2. 显示菜单列表在菜单组件中，使用Vuex的中的菜单数据回显： {{group.name}} {{menu.name}} {{group.name}}通过本页面的$route的URL进行菜单匹配，并不是全路径的URL。 路由需要分成两类，静态路由和动态路由。静态路由是任何菜单权限下都能查看的界面路由；动态路由是根据菜单权限动态生成的路由集合。这里的动态路由与VueRouter的动态路由概念没有任何关系。 比如： /** router.js */ /** * 静态路由 */ export const constantRouterMap = [ { path: '/', redirect: '/dashboard' }, { path: '/login', name: 'Login', component: () => import('@/views/Login') }, { path: '/forgetPassword', name: 'ForgetPassword', component: () => import('@/views/ForgetPassword') }, { path: '/register', name: 'Register', component: () => import('@/views/Register') }, { path: '*', name: '404', component: () => import('@/views/404') } ] /** * 需要动态添加的路由 */ export const asyncRouterMap = [ { path: '/educate', name: 'Educate', component: Layout, meta: { title: '教务管理' }, children: [ { path: 'student', name: 'Student', component: () => import('_v/educate/student'), meta: { keepAlive: true, title: '学员中心-桃李云帮' } }, { path: 'studentEnroll', name: 'StudentEnroll', component: () => import('_v/educational/studentEnroll'), meta: { isLeaf: true, title: '学员报名-桃李云帮' } }, { path: 'class', name: 'Class', component: () => import('_v/educate/class'), meta: { // keepAlive: true, title: '班级管理-桃李云帮' } }, { path: 'timetable', name: 'Timetable', component: () => import('_v/educate/table'), meta: { // 不需要缓存 title: '课表管理-桃李云帮' } }, { path: 'course', name: 'Course', component: () => import('_v/educate/course'), meta: { keepAlive: true, title: '课程管理-桃李云帮' } } ] }, executiveRoute, .... ] export default new Router({ mode: 'hash', base: process.env.BASE_URL, routes: constantRouterMap // 这里只返回静态路由 }) 2. 动态匹配路由使用VueRouter的router.addRoutes(routes: Array)方法，动态添加路由。 注意：这里是通过URL匹配，你也可以根据其他方式匹配。 isLeaf表示不在菜单中的路由，应该根据权限来判断是否动态添加路由 /** store.js */ addUserMenus({ commit }, menus) { commit('setMenuList', menus) // 扁平化菜单数据 const menuList = treeToList(menus.concat([])) const addRoutes = [] let tempPath = '' let tempList = [] // 这里只做了两层的路由处理 asyncRouterMap.forEach(item1 => { tempPath = item1.path || '' tempList = [] if (item1.children) { item1.children.forEach(item2 => { // TODO isLeaf是写死的，应该按照权限判断 if ((item2.meta && item2.meta.isLeaf) || menuList.find(o => o.url && path.join(tempPath, item2.path).toLowerCase() === o.url.toLowerCase())) { tempList.push(item2) } }) } if (tempList.length > 0) { addRoutes.push(Object.assign({}, item1, { children: tempList })) } }) // 添加授权路由页面 Router.addRoutes(addRoutes) }treeToList方法 /** * 树 转 列表 * 广度优先，先进先出 * @param {Array} tree 树状数据 * @param {String} childKey children的key */ export function treeToList(tree, childKey = 'children') { let stack = tree.concat([]) let data = [] while (stack.length !== 0) { // 从stack中拿出来分析 let shift = stack.shift() // stack.pop() 先进后出 data.push(shift) let children = shift[childKey] if (children) { for (let i = 0; i |
至此，通过后端返回的菜单数据动态生成菜单已完成。但是细心的小伙伴会发现，手动输入没有菜单的URL，仍然可以查看显示，这是不安全的，并且菜单栏无匹配项。【本文地址】
今日新闻 |
推荐新闻 |