elementPlus配合vue-router搭建后台系统菜单模块

设置menuType来区分菜单类型

  /**
   * @params menuType
   * -1 一般为首页 / -> /home 只显示第一个子项
   * -2 为无子菜单的菜单项 /config -> /config/person 无上下级，使用一级title
   * -3 正常菜单 /system -> /system/1 | /system/2 有上下级
   */

先看看页面效果吧

• type=1

  export default [
    {
  	path: '/',
  	component: Layout,
  	redirect: '/home',
  	meta: { icon: 'House', menuType: 1 },
  	children: [
  	  {
  		path: 'home',
  		component: () => import('@/views/home/index.vue'),
  		meta: { title: '首页' }
  	  },
  	  {
  		path: '401',
  		component: () => import('@/views/home/401.vue'),
  		meta: { title: '401', hideMenu: true }
  	  },
  	  {
  		path: '404',
  		component: () => import('@/views/home/404.vue'),
  		meta: { title: '404', hideMenu: true }
  	  }
  	]
    },
    {
  	path: '/:pathMatch(.*)*',
  	redirect: '/404',
  	meta: { hideMenu: true }
    }
  ]

• type=2

  export default [
    {
  	path: '/configuration',
  	component: Layout,
  	meta: { title: '配置管理', icon: 'MessageBox', menuType: 2 },
  	redirect: '/configuration/form',
  	children: [
  	  {
  		path: 'form',
  		component: () => import('@/views/configuration/form/index.vue'),
  		meta: { title: '表单可视化', cache: false }
  	  }
  	]
    }
  ]

• type=3

  export default [
    {
  	path: '/dataset',
  	component: Layout,
  	meta: { title: '数据集管理', icon: 'DataAnalysis', menuType: 3 },
  	redirect: '/dataset/multi',
  	children: [
  	  {
  		path: 'multi',
  		component: () => import('@/views/dataset/multi/index.vue'),
  		meta: { title: '共享数据集', cache: true }
  	  },
  	  {
  		path: 'person',
  		component: () => import('@/views/dataset/person/index.vue'),
  		meta: { title: '个人数据集', cache: true }
  	  }
  	]
    }
  ]

区别看得出来吧，看得出来吧，出来吧，吧！
最主要看看menu逻辑
menu:

menuItem:

通过路由meta里面设置hideMenu属性来控制是否在菜单栏展示

menuType

• 为1时（首页），取第一个children的信息
• 为2时取主菜单信息，不展示子菜单
• 为3时全部展示父子菜单
  然后就是获取path和取title的逻辑，看看代码就能懂