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.commit('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.commit('setting/setMenuData',menuRoutes);
}
}