vue实现后台管理权限系统及顶栏三级菜单显示功(2)

如图所示,在完成一般后台系统所具有的二级导航菜单功能之后,我发现其实很多的后台管理系统都有三级导航菜单,但是如果都把三级菜单放到左侧菜单做阶梯状排列,就会显得比较紧凑,因此我觉得把所有的三级菜单放到顶部是一个不错的选择。

开发需求:点击左侧菜单,找到其对应的菜单(顶栏菜单)排放于顶部导航栏;

开发步骤:

1、 定义顶部导航组件topMenu.vue;

通过element-ui,NavMenu 导航菜单来进行顶部菜单的展示,注意顶栏和侧栏设置的区别;同时将其引用于头部组件headNav.vue中;

2、定义顶栏路由数据router/topRouter.js;

格式如下:

export const topRouterMap = [ { 'parentName':'infoShow', 'topmenulist':[ { path: 'infoShow1', name: 'infoShow1', meta: { title: '个人信息子菜单1', icon: 'fa-asterisk', routerType: 'topmenu' }, component: () => import('@/page/fundList/moneyData') } ] }, { 'parentName':'chinaTabsList', 'topmenulist':[ { path:'chinaTabsList1', name:'chinaTabsList1', meta:{ title:'区域投资子菜单1', icon:'fa-asterisk', routerType:'topmenu' }, component: () => import('@/page/fundList/moneyData') } ] } ]

定义topRouterMap为路由总数组;通过parentName来与左侧路由建立联系;通过topmenulist表示该顶栏路由的值;通过meta.routerType的值为"topmenu"或"leftmenu"来区分是顶栏路由,还是左侧路由;

3、 准备headNav.vue中渲染数据;

思路:点击左侧菜单,需要显示顶部对应的菜单。因为左侧菜单要和顶部菜单建立联系。我们知道导航菜单在用户登录时,会根据用户的role信息进行权限过滤;那么,在过滤权限路由数据之前,我们可以通过addTopRouter()将所有的三级菜单进行过滤添加,添加完成之后,继续进行角色过滤,可以保证将不具备权限的顶部菜单也过滤掉。

// 通过循环过滤,生成新的二级菜单 function addTopRouter(){ asyncRouterMap.forEach( (item) => { if(item.children && item.children.length >= 1){ item.children.forEach((sitem) => { topRouterMap.forEach((citem) => { if(sitem.name === citem.parentName){ let newChildren = item.children.concat(citem.topmenulist); item.children = newChildren; } }) }) } }) return asyncRouterMap; }

4、点击左侧菜单过滤路由并显示对应数据;

在组件topMenu.vue中,用户默认进来或者点击左侧菜单,触发setLeftInnerMenu()函数,如下:

setLeftInnerMenu(){ if(this.$route.meta.routerType == 'leftmenu'){ // 点击的为 左侧的2级菜单 this.$store.dispatch(''ClickLeftInnerMenu, {'name':this.$route.name} ); }else{ // 点击顶部的菜单 this.$store.dispatch('ClickTopMenu', {'title':this.$route.meta.title} ); } }

通过当前路由this.$route.meta.routerType的值判断,用户是点击顶部菜单还是左侧菜单。如果点击顶部菜单,通过this.$store触发异步动作'ClickLeftInnerMenu'并传递参数'name',vuex中通过state.topRouters = filterTopRouters(state.routers,data)过滤当前路由信息;代码如下:

// 获取到当前路由对应顶部子菜单 function filterTopRouters(data){ let topRouters = topRouterMap.find((item)=>{ return item.parentName === data.name }) if(!mutils.isEmpty(topRouters)){ return topRouters.topmenulist; } }

topMenu.vue中,通过 computed:{ ...mapGetters(['topRouters'])}进行对应顶部路由数据的展示。用户每次点击左侧菜单时,顶部路由都进行了重新赋值并渲染,保证了数据的准确性。

5、顶部菜单完善;

当顶部菜单的数据量过大时,我们需要设置横向滚动条并设置滚动条的样式。
 如图:

vue实现后台管理权限系统及顶栏三级菜单显示功

mock数据详解

easy-mock使用

Easy Mock介绍:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3b3ccbbbbdbfbe7877c8a0d93afdbbdd.html