当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由）

Vue 实现动态生成路由（动态生成菜单，根据菜单动态生成路由）

2020年07月17日  | 移动技术网IT编程  | 我要评论

在后台管理系统中，常常会因为不同的权限，展现不同的菜单。但这仅仅是显示控制，而我们要做的是没有的菜单权限，直接输入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的中的菜单数据回显：

<!-- 菜单组件 -->
<el-menu
  class="sidebar-menu"
  router
  :default-active="$route.path"
  :collapse="!sidebar.opened"
  :collapse-transition="false"
  :show-timeout="200"
  unique-opened
  background-color="#272a36"
  text-color="#e7e7e7"
  active-text-color="#ff6600">
  <el-scrollbar wrap-class="scrollbar-wrapper" style="height: 100%;">
    <template v-for="group in menuList">
      <el-submenu v-if="group.children && group.children.length > 0" :key="group.id" :index="group.id">
        <template slot="title">
          <i :class="group.icon"></i>
          <span slot="title">{{group.name}}</span>
        </template>
        <el-menu-item v-for="menu in group.children" :key="menu.id" :index="menu.url">
          <i class="icon iconfont icon-pointer" style="vertical-align: baseline;"/>
          {{menu.name}}
        </el-menu-item>
      </el-submenu>
      <el-menu-item v-else :key="group.id" :index="group.url">
        <i :class="group.icon"></i>
        <span slot="title">{{group.name}}</span>
      </el-menu-item>
    </template>
  </el-scrollbar>
</el-menu>

通过本页面的$route的URL进行菜单匹配，并不是全路径的URL。在这里插入图片描述
至此，通过后端返回的菜单数据动态生成菜单已完成。但是细心的小伙伴会发现，手动输入没有菜单的URL，仍然可以查看显示，这是不安全的，并且菜单栏无匹配项。

二、动态生成路由

1. 把路由分类

路由需要分成两类，静态路由和动态路由。静态路由是任何菜单权限下都能查看的界面路由；动态路由是根据菜单权限动态生成的路由集合。这里的动态路由与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<RouteConfig>)方法，动态添加路由。
注意：这里是通过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 < children.length; i++) {
        // 把数据放入stack中
        stack.push(children[i])
      }
    }
  }
  return data
}

本文地址：https://blog.csdn.net/tly599167/article/details/107378249

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网