vue2+antd——实现动态菜单路由功能——基础积累

vue2+antd——实现动态菜单路由功能——基础积累 实现的需求：效果图：登录接口处添加以下代码`loadRoutes`方法内容如下： 最近在写后台管理系统，遇到一个需求就是要将之前的静态路由改为动态路由，使用的后台框架是： vue-antd-admin

实现的需求： 在页面开始登录时，通过路由接口可以获取到所有有权限的菜单数据。

然后通过loadRoutes方法来实现异步动态路由。

效果图：

登录接口处添加以下代码

如上图所示，需要在登录接口调用成功后，书写以下的代码： import { loadRoutes } from '@/utils/routerUtil.js';

//调用异步动态路由接口 //接口返回的数据格式如下： loadRoutes( {router:this.$router,store:this.$store,i18n:this.$18n}, [ { router:'root', children:[ { router:'default', name:'工作台', component:()=>import('@/pages/dashboard/index') }, { router:'/memberManage', name:'客户管理', component:()=>import('@/layouts/BlankView'), children:[ { router:'list', path:'/company/list', name:'企业管理', component:()=>import('@/pages/Member/Company/list') }, { router:'detail', path:'/company/detail', name:'企业详情', invisible:true, component:()=>import('@/pages/Member/Company/detail') } ] }, { router:'/member', name:'用户管理', component:()=>import('@/layouts/BlankView'), redirect:'/member/list', children:[ { router:'list', name:'用户管理', path:'/member/list', component:()=>import('@/pages/Member/Member/list') },{ router:'detail', name:'用户详情', path:'/member/detail', invisible:true, component:()=>import('@/pages/Member/Member/detail') } ] },{ router:'/system', name:'系统管理', component:()=>import('@/layouts/PageView'), children:[ { router:'role', name:'角色管理', path:'/system/role', component:()=>import('@/pages/identity/RoleList'), },{ router:'organization', name:'部门组织', path:'/system/organizaition', component:()=>import('@/pages/organization/organizationUnits') },{ router:'user', name:'用户管理', path:'/system/user', component:()=>import('@/pages/identity/UserList') },{ router:'dataDictionary', name:'数据字典', path:'/system/dataDictionary', component:()=>import('@/pages/dataDictionary/DataDictionary') },{ router:'openApi', name:'客户端管理', path:'/system/openApi', component:()=>import('@/pages/OpenAPI/index') },{ router:'httpApi', name:'HttpApi日志', path:'/system/httpApi', component:()=>import('@/pages/system/httpApi') },{ router:'auditLog', name:'审计日志', path:'/system/auditLog', component:()=>import('@/pages/system/auditLog') },{ router:'cache', name:'缓存列表', path:'/system/cache', component:()=>import('@/pages/system/cache') } ] } ] } ] ) loadRoutes方法内容如下： function loadRoutes(routesConfig){ if(arguments.length>0){ const arg0 = arguments[0]; if(arg0.router ||arg0.i18n||arg0.store){ routesConfig = arguments[i]; console.error('the usage of signature loadRoutes({router,store,i18n},routesConfig) is out of date,please use the new signature:loadRoutes(routesConfig)') connsole.error('方法签名 loadRoutes({router,store,i18n},routesConfig)的用法已过时，请使用新的方法签名loadRoutes(routesConfig)') } } //应用配置 const {router,store,i18n} = appOptions; //如果routesConfig有值，则更新到本地，否则从本地获取 if(routesConfig){ store mit('account/setRoutesConfig',routesConfig); }else{ routesConfig = store.getters['account/routesConfig'] } //如果开启了异步路由，则加载异步路由配置 //const asyncRoutes = store.state.setting.asyncRoutes const asyncRoutes = true; if(asyncRoutes){ if(routesConfig&&routesConfig.length>0){ const routes = parseRoutes(routesConfig,routerMap); const finalRoutes = mergeRoutes(basicOptions.routes,routes); formatRoutes(finalRoutes); router.options = {...router.options,routes:finalRoutes}; router.matcher = new Router({...router.options,routes:[]}).matcher; router.addRoutes(finalRoutes); } } mergeI18nFromRoutes(i18n,router.options.routes); //初始化admin后台菜单数据 const rootRoute = router.options.routes.find(item=>item.path==='/'); const menuRoutes = rootRoute&&rootRoute.children; if(menuRoutes){ store mit('setting/setMenuData',menuRoutes); } }