vue动态路由生成

1.定义好数据格式

  {
    url: '/vue-admin-template/user/getRouter',
    type: 'post',
    response: type => {
      if (type.body.type === 'admin-token') {
        return {
          code: 20000,
          data: {
            router: [
              {
                id: 1,
                name: 'Nested',
                code: null,
                description: null,
                url: '/nested',
                component: 'layout',
                generatemenu: 1,
                sort: 0,
                parentId: null,
                permName: null,
                redirect: '/nested/menu1',
                title: '管理员路由',
                icon: 'nested',
                children: [
                  {
                    id: 2,
                    name: 'Menu1',
                    code: null,
                    description: null,
                    url: 'menu1',
                    component: 'nested/menu1',
                    generatemenu: 1,
                    sort: 0,
                    parentId: 1,
                    permName: null,
                    redirect: '',
                    title: 'Menu1',
                    icon: 'menu1',
                    children: [
                      {
                        id: 4,
                        name: 'Menu1-1',
                        code: null,
                        description: null,
                        url: 'menu1-1',
                        component: 'nested/menu1/menu1-1',
                        generatemenu: 1,
                        sort: 0,
                        parentId: 2,
                        permName: null,
                        redirect: '',
                        title: 'Menu1-1',
                        icon: '',
                        children: null
                      },
                      {
                        id: 5,
                        name: 'Menu1-2',
                        code: null,
                        description: null,
                        url: 'menu1-2',
                        component: 'nested/menu1/menu1-2',
                        generatemenu: 1,
                        sort: 0,
                        parentId: 2,
                        permName: null,
                        redirect: '',
                        title: 'Menu1-2',
                        icon: '',
                        children: null
                      }
                    ]
                  },
                  {
                    id: 3,
                    name: 'Menu2',
                    code: null,
                    description: null,
                    url: 'menu2',
                    component: 'nested/menu2',
                    generatemenu: 1,
                    sort: 0,
                    parentId: 1,
                    permName: null,
                    redirect: '',
                    title: 'Menu2',
                    icon: 'menu2',
                    children: null
                  }
                ]
              }
            ],
            permit: ['add', 'delete', 'edit', 'view']
          }
        }
      } else if (type.body.type === 'editor-token') {
        return {
          code: 20000,
          data: {
            router: [
              {
                id: 1,
                name: 'Example',
                code: null,
                description: null,
                url: '/example',
                component: 'layout',
                generatemenu: 1,
                sort: 0,
                parentId: null,
                permName: null,
                redirect: '/example/table',
                title: '普通用户',
                icon: 'example',
                children: [
                  {
                    id: 2,
                    name: 'Table',
                    code: null,
                    description: null,
                    url: 'table',
                    component: 'table',
                    generatemenu: 1,
                    sort: 0,
                    parentId: 1,
                    permName: null,
                    redirect: '',
                    title: 'Table',
                    icon: 'table',
                    children: null
                  },
                  {
                    id: 3,
                    name: 'Tree',
                    code: null,
                    description: null,
                    url: 'tree',
                    component: 'tree',
                    generatemenu: 1,
                    sort: 0,
                    parentId: 1,
                    permName: null,
                    redirect: '',
                    title: 'Tree',
                    icon: 'tree',
                    children: null
                  }
                ]
              }
            ],
            permit: ['edit', 'view']
          }
        }
      }
    }
  }        

2.解析数据生成路由数据

/**
 * 生成路由
 * @param {Array} routerlist 格式化路由
 * @returns
 */
export function addRouter(routerlist) {
  const router = []
  try {
    routerlist.forEach(e => {
      let e_new = {
        path: e.url,
        name: e.name,
        component: resolve => e.component === 'layout' ? require([`@/layout`], resolve) : require([`@/views/${e.component}/index`], resolve)
      }
      if (e.children) {
        const children = addRouter(e.children)
        // 保存权限
        e_new = { ...e_new, children: children }
      }
      if (e.redirect) {
        e_new = { ...e_new, redirect: e.redirect }
      }
      if (e.generatemenu === 0) {
        e_new = { ...e_new, hidden: true }
      }
      if (e.icon !== '' && e.title !== '') {
        e_new = { ...e_new, meta: { title: e.title, icon: e.icon }}
      } else if (e.title !== '' && e.icon === '') {
        e_new = { ...e_new, meta: { title: e.title }}
      }
      router.push(e_new)
    })
  } catch (error) {
    console.error(error)
    return []
  }
  return router
}

3.添加路由

function gotoRouter(to, next) {
  getRouter(store.getters.token) // 获取动态路由的方法
    .then(res => {
      console.log('解析后端动态路由', res)
      const asyncRouter = addRouter(res.data.router) // 进行递归解析
      store.dispatch('user/setroles', res.data.permit)
      return asyncRouter
    })
    .then(asyncRouter => {
      // 后置添加404页面,防止刷新404
      asyncRouter.push({
        path: '*',
        redirect: '/404',
        hidden: true
      })
      router.addRoutes(asyncRouter) // vue-router提供的addRouter方法进行路由拼接
      console.log(asyncRouter)
      store.dispatch('user/setRouterList', asyncRouter) // 存储到vuex
      store.dispatch('user/GetInfo')
      store.commit('user/set_init', true)
      next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
    })
    .catch(e => {
      console.log(e)
      removeToken()
    })
}

源码地址

https://github.com/vkcyan/vue-element-asyncLogin