vue左侧菜单隐藏_6-项⽬左侧菜单栏显⽰vue⾯包导航
1、后台处理
查询主菜单和⼦菜单很简单，⾸先菜单类中要有⾃⼰的⼦类集合
然后，将菜单进⾏笛卡⼉积查询两次，将查询后的结果进⾏如下筛选
m1.id=m2.parentId
m1.id!=1
m2.id in(这个根据⼀个个查询，最后查到该mid)
导航菜单根据m1.id,m2.id 进⾏排序
select m1.`id`,m1.`path`,m1.`component`,m1.`iconCls`,m1.`name`,m1.`requireAuth`,m2.`component` as
component2,m2.`iconCls` as iconCls2,
m2.`keepAlive` as keepAlive2,m2.`name` as name2,m2.`path` as path2,m2.`requireAuth` as requireAuth2 from menu
m1,menu m2 --笛卡尔积
where m1.`id`=m2.`parentId`--查询⽗⼦关系
and m1.`id`!=1 --去掉根节点
and m2.`id` in(select mr.`mid` from hr_role h_r,menu_role mr where h_r.`rid`=mr.`rid` and h_r.`hrid`=#{hrId})--查询那个⽤户才具有该权限
and m2.`enabled`=true order by m1.`id`,m2.`id` --进⼀步筛选、排序
2、前端处理
前端的处理稍微⿇烦，为了想把后台传递来的json转化为Vue所需要的形状，所以要构建⼀个⼯具类来专门处理该过程
store中要定义⼀个数据来保存菜单数据
书写转换⽅法，转换后将数据保存到上⾯routes中，供后⾯调⽤
import {getRequest} from './api'
import {Message} from 'element-ui'exportconst initMenu = (router, store)=>{if (utes.length > 0) {return;
}
getRequest("/config/sysmenu").then(resp=>{if (resp && resp.status == 200) {
var fmtRoutes=formatRoutes(resp.data);
router.addRoutes(fmtRoutes);
storemit('initMenu', fmtRoutes);
}
})
}
exportconst formatRoutes = (routes)=>{
let fmRoutes=[];
routes.forEach(router=>{
path,
component,
name,
meta,
iconCls,
children
}=router;if (children && children instanceofArray) {
children=formatRoutes(children);
}
let fmRouter={
path: path,
component(resolve){if (component.startsWith("Home")) {
require(['../components/' + component + '.vue'], resolve)
}else if (component.startsWith("Emp")) {
require(['../components/emp/' + component + '.vue'], resolve)
}else if (component.startsWith("Per")) {
require(['../components/personnel/' + component + '.vue'], resolve) }else if (component.startsWith("Sal")) {
require(['../components/salary/' + component + '.vue'], resolve)
}else if (component.startsWith("Sta")) {
require(['../components/statistics/' + component + '.vue'], resolve) }else if (component.startsWith("Sys")) {
require(['../components/system/' + component + '.vue'], resolve)
}
},
name: name,
iconCls: iconCls,
meta: meta,
children: children
};
fmRoutes.push(fmRouter);
})returnfmRoutes;
}
⾯包栏中遇到的问题v-text="this.$router.currentRoute.name"来获取当前路由的名字⾸页
活动管理
⾄此，ok.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。