vue管理平台的动态路由

根据后台返回的路由来显示对应的菜单栏

两种思路，一种是将后台的数据拿到遍历成前端的路由格式，另一种是前端写一份路由，拿到后台的数据进行比对，然后筛选出需要的路由进行展示。

这两种方式思路都一样，将拿到的后台数据进行递归改造，然后router.addRoutes()，将新的动态路由添加进去即可。

/**
 * 后台查询的菜单数据拼装成路由格式的数据
 * @param route [] 7  * @param {arr} clientAsyncRoutes 前端保存动态路由
 * @param {arr} serverRouter 后端保存动态路由
 */
function generaMenu(route, serverRouter, clientAsyncRoutes) {
  state.menu = {}
  serverRouter.map((ele, index) => {
    for (let i = 0; i < clientAsyncRoutes.length; i++) {
      if (clientAsyncRoutes[i].name === serverRouter[index].name) {
        state.menu = {
          path: clientAsyncRoutes[i].path,
          component: clientAsyncRoutes[i].component,
          // hidden: true,
          name: clientAsyncRoutes[i].name + '_' + serverRouter[index].id,
          meta: serverRouter[index].name === 'Home' ? '' : { title: clientAsyncRoutes[i].meta.title, icon: clientAsyncRoutes[i].meta.icon }, 
          children: serverRouter[index].name === 'Home' ? clientAsyncRoutes[i].children : []
        }
        route.push(state.menu)
        if (serverRouter[index].subData.length > 0) {
          generaMenu(state.menu.children, serverRouter[index].subData, clientAsyncRoutes[i].children)
        }
      }
    }
  })
}

可根据具体需求 来配置具体的路由格式

下面是我项目中的路由

import Layout from '@/layout'

const eventOperationRouter = {
  path: '/eventOperation',
  component: Layout,
  redirect: '/eventOperation/banner/index',
  name: 'eventOperation',
  meta: {
    title: 'Event Operation',
    icon: 'iconfont icon-icon-event'
  },
  children: [
    {
      path: 'banner',
      component: () => import('@/views/eventOperation/banner/index'), // Parent router-view
      name: 'Banner',
      meta: {
        title: 'Banner'
      }
    },
    {
      path: ''
    }
  ]
}
export default eventOperationRouter

部分后台返回的数据格式