element admin 动态路由_vueelementadmin 如何改造成 动态获取路由菜单

vue-element-admin 如何改造成 动态获取路由菜单

本篇主要讲解 vue-element-admin 如何改造成 动态获取菜单

1.搭建vue-element-admin 项目

1.1 fork vue-element-admin 项目

第一步登录github 找到 vue-element-admin 项目  vue-element-admin github连接

fork 到自己的仓库  如下

1.2 打开 码云导入fork后的项目

1.3 复制码云的连接 git clone

我选择的分支是 i18n

clone 下代码 后 执行 npm install

执行 npm run dev

登录成功后 如下

至此 vue-element-admin 就搭建好了，下面来做一些修整 把自带的 所有的 菜单都去掉

2.删除 自带的路由菜单

打开 router/index.js   需要 分别需要删除 constantRouters  和 asyncRoutes 以及 modules 中部分的路由

• 将constantRouters 中的 documentation 和 guide 路由注释掉或者删掉

• 第二步将  asyncRoutes 中的 全部删了，只留下 permission 并且做一些修改 作为我们后面测试用,如下：

export const asyncRoutes = [

   {

        path: '/permission',

        component: Layout,

        redirect: '/permission/page',

        alwaysShow: true, // will always show the root menu

        name: 'Permission',

        meta: {

            title: '系统设置',

            icon: 'lock',

            roles: ['admin', 'editor'] // you can set roles in root nav

        },

        children: [

            {

                path: 'page',

                component: () => import('@/views/permission/page'),

                name: 'PagePermission',

                meta: {

                    icon: 'lock',

                    title: '用户管理',

                    roles: ['admin'] // or you can only set roles in sub nav

                }

            },

            {

                path: 'directive',

                component: () => import('@/views/permission/directive'),

                name: 'DirectivePermission',

                meta: {

                    icon: 'lock',

                    title: '角色管理'

                    // if do not set roles, means: this page does not require permission

                }

            },

            {

                path: 'role',

                component: () => import('@/views/permission/role'),

                name: 'RolePermission',

                meta: {

                    icon: 'lock',

                    title: '菜单',

                    roles: ['admin']

                }

            }

        ]

    },

    //   {

    //     path: '/icon',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'index',

    //         component: () => import('@/views/icons/index'),

    //         name: 'Icons',

    //         meta: { title: 'icons', icon: 'icon', noCache: true }

    //       }

    //     ]

    //   },

    /** when your routing map is too long, you can split it into small modules **/

    //   componentsRouter,

    //   chartsRouter,

    //   nestedRouter,

    //   tableRouter,

    //   {

    //     path: '/example',

    //     component: Layout,

    //     redirect: '/example/list',

    //     name: 'Example',

    //     meta: {

    //       title: 'example',

    //       icon: 'el-icon-s-help'

    //     },

    //     children: [

    //       {

    //         path: 'create',

    //         component: () => import('@/views/example/create'),

    //         name: 'CreateArticle',

    //         meta: { title: 'createArticle', icon: 'edit' }

    //       },

    //       {

    //         path: 'edit/:id(\\d+)',

    //         component: () => import('@/views/example/edit'),

    //         name: 'EditArticle',

    //         meta: { title: 'editArticle', noCache: true, activeMenu: '/example/list' },

    //         hidden: true

    //       },

    //       {

    //         path: 'list',

    //         component: () => import('@/views/example/list'),

    //         name: 'ArticleList',

    //         meta: { title: 'articleList', icon: 'list' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/tab',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'index',

    //         component: () => import('@/views/tab/index'),

    //         name: 'Tab',

    //         meta: { title: 'tab', icon: 'tab' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/error',

    //     component: Layout,

    //     redirect: 'noRedirect',

    //     name: 'ErrorPages',

    //     meta: {

    //       title: 'errorPages',

    //       icon: '404'

    //     },

    //     children: [

    //       {

    //         path: '401',

    //         component: () => import('@/views/error-page/401'),

    //         name: 'Page401',

    //         meta: { title: 'page401', noCache: true }

    //       },

    //       {

    //         path: '404',

    //         component: () => import('@/views/error-page/404'),

    //         name: 'Page404',

    //         meta: { title: 'page404', noCache: true }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/error-log',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'log',

    //         component: () => import('@/views/error-log/index'),

    //         name: 'ErrorLog',

    //         meta: { title: 'errorLog', icon: 'bug' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/excel',

    //     component: Layout,

    //     redirect: '/excel/export-excel',

    //     name: 'Excel',

    //     meta: {

    //       title: 'excel',

    //       icon: 'excel'

    //     },

    //     children: [

    //       {

    //         path: 'export-excel',

    //         component: () => import('@/views/excel/export-excel'),

    //         name: 'ExportExcel',

    //         meta: { title: 'exportExcel' }

    //       },

    //       {

    //         path: 'export-selected-excel',

    //         component: () => import('@/views/excel/select-excel'),

    //         name: 'SelectExcel',

    //         meta: { title: 'selectExcel' }

    //       },

    //       {

    //         path: 'export-merge-header',

    //         component: () => import('@/views/excel/merge-header'),

    //         name: 'MergeHeader',

    //         meta: { title: 'mergeHeader' }

    //       },

    //       {

    //         path: 'upload-excel',

    //         component: () => import('@/views/excel/upload-excel'),

    //         name: 'UploadExcel',

    //         meta: { title: 'uploadExcel' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/zip',

    //     component: Layout,

    //     redirect: '/zip/download',

    //     alwaysShow: true,

    //     name: 'Zip',

    //     meta: { title: 'zip', icon: 'zip' },

    //     children: [

    //       {

    //         path: 'download',

    //         component: () => import('@/views/zip/index'),

    //         name: 'ExportZip',

    //         meta: { title: 'exportZip' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/pdf',

    //     component: Layout,

    //     redirect: '/pdf/index',

    //     children: [

    //       {

    //         path: 'index',

    //         component: () => import('@/views/pdf/index'),

    //         name: 'PDF',

    //         meta: { title: 'pdf', icon: 'pdf' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/pdf/download',

    //     component: () => import('@/views/pdf/download'),

    //     hidden: true

    //   },

    //   {

    //     path: '/theme',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'index',

    //         component: () => import('@/views/theme/index'),

    //         name: 'Theme',

    //         meta: { title: 'theme', icon: 'theme' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/clipboard',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'index',

    //         component: () => import('@/views/clipboard/index'),

    //         name: 'ClipboardDemo',

    //         meta: { title: 'clipboardDemo', icon: 'clipboard' }

    //       }

    //     ]

    //   },

    //   {

    //     path: '/i18n',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'index',

    //         component: () => import('@/views/i18n-demo/index'),

    //         name: 'I18n',

    //         meta: { title: 'i18n', icon: 'international' }

    //       }

    //     ]

    //   },

    //   {

    //     path: 'external-link',

    //     component: Layout,

    //     children: [

    //       {

    //         path: 'https://github.com/PanJiaChen/vue-element-admin',

    //         meta: { title: 'externalLink', icon: 'link' }

    //       }

    //     ]

    //   },

    // 404 page must be placed at the end !!!

    { path: '*', redirect: '/404', hidden: true }

]