如何用elementPlus和vue-router构建后台菜单模块疑问？
摘要：设置menuType来区分菜单类型 ** * @params menuType * -1 一般为首页-> home 只显示第一个子项 * -2 为无子菜单的菜单项 config ->
设置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:
<template>
<el-scrollbar>
<el-menu
:default-active="activePath"
:collapse="!!collapseMenu"
:collapse-transition="false"
>
<menu-item
v-for="(menu, key) in allRoutes"
:key="key"
:menu="menu"