首页 > 其他分享> 文章详细

6-项目左侧菜单栏显示

2020-02-23 19:04:52 阅读：468 来源： 互联网

标签：resolve 项目左侧 component 菜单栏 children m1 m2 id

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'
export const initMenu = (router, store)=> {
  if (store.state.routes.length > 0) {
    return;
  }

  getRequest("/config/sysmenu").then(resp=> {
      
    if (resp && resp.status == 200) {
      var fmtRoutes = formatRoutes(resp.data);
      router.addRoutes(fmtRoutes);
      store.commit('initMenu', fmtRoutes);
    }
  })
}

export const formatRoutes = (routes)=> {
  let fmRoutes = [];
  routes.forEach(router=> {
    let {
      path,
      component,
      name,
      meta,
      iconCls,
      children
    } = router;

    if (children && children instanceof Array) {
      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);
  })
  return fmRoutes;
}

调用

面包栏中遇到的问题v-text="this.$router.currentRoute.name"来获取当前路由的名字

          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-text="this.$router.currentRoute.name">活动管理</el-breadcrumb-item>
          </el-breadcrumb>

至此，ok.

标签：resolve,项目,左侧,component,菜单栏,children,m1,m2,id
来源： https://www.cnblogs.com/gfbzs/p/12353261.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

6-项目左侧菜单栏显示