簡述：
該菜單布局可以自由配置頂部菜單和側(cè)邊菜單的顯示與否，也可以自由選擇頂部菜單和側(cè)邊菜單的父子關(guān)系，此菜單布局相較mx-design中的menu-layout父子菜單關(guān)系相對靈活，且可以在一個工程中多次使用，通過路由來控制，使用該菜單布局的頁面需要創(chuàng)建一個根路由，component引入該菜單組件。
示例
{
path: '/',
name: 'MChain',
component: () => import('@/layout/MChain-menu-layout.vue'),
redirect: '/MBoundaryApp',
meta: {...}
children:[...]
}
配置項(xiàng)說明
meta:
hideChildrenInMenu:true | false 是否隱藏子菜單（所謂子菜單見下圖紅框），如果不設(shè)置則默認(rèn)展示子菜單
1656398797782.png
icon:菜單圖標(biāo)，圖標(biāo)用法mx-design框架中有提及，這里主要說明的是：以 http://cp.oss.pcep.cnpc.com.cn/mx-icon 為開頭的圖標(biāo)無法通過css改變其樣式（比如顏色），可以直接把圖標(biāo)svg下載，放到assets>icons文件夾下，在meta中直接使用 icon: self-圖標(biāo)名即可。如果不想顯示圖標(biāo)就不配置
1656399090071.png
1656399132288.png
topMenuStep：頂部菜單對應(yīng)的子路由層級，如果設(shè)置為0或不設(shè)置則表示沒有頂部菜單
siderMenuStep:側(cè)邊菜單對應(yīng)的子路由層級，如果設(shè)置為0或不設(shè)置則表示沒有側(cè)邊菜單
示例1：頂部菜單做父菜單，側(cè)邊菜單做子菜單（或者說1級子路由做頂部菜單，2級子路由做側(cè)邊菜單）
export const customPageRouter: RouteRecordRaw[] = [
// 自定義的菜單布局頁面
{
path: '/',
name: 'MChain',
component: () => import('@/layout/MChain-menu-layout.vue'),
redirect: '/MBoundaryApp',
meta: {
title: '夢鏈工作臺',
topMenuStep:1,// 想要將第幾級子菜單作為頂部菜單,如果設(shè)置為0或不設(shè)置則表示沒有相應(yīng)菜單
siderMenuStep: 2 // 想要將第幾級子菜單作為側(cè)邊菜單，示例：/MBoundaryApp 是1級子菜單，/MBoundaryApp/subject是2級子菜單
},
children: [
{
path: '/MBoundaryApp',
name: 'MBoundaryApp',
redirect: '/MBoundaryApp/subject', //如果想默認(rèn)選中該子菜單，需要這句重定向
component: () => import('@/views/MBoundaryApp/index.vue'),
meta: {
title: '夢境認(rèn)知環(huán)境',
hideChildrenInMenu:true //是否在自身中隱藏子菜單,如果不設(shè)置則默認(rèn)顯示
},
children: [
{
path: '/MBoundaryApp/subject',
name: 'subject',
component: () => import('@/views/MBoundaryApp/subject.vue'),
meta: {
title: '學(xué)科模塊',
icon: 'self-epai-fa-pzgl',
},
},
{
path: '/MBoundaryApp/myProject',
name: 'myProject',
component: () => import('@/views/MBoundaryApp/myProjects.vue'),
meta: {
title: '我的項(xiàng)目',
icon: 'self-xiangmuguanli'
}
},
{
path: '/MBoundaryApp/myOperation',
name: 'myOperation',
component: () => import('@/views/MBoundaryApp/myOperation.vue'),
meta: {
title: '我的運(yùn)營',
icon: 'self-xiangmuguanli'
}
},
{
path: '/MBoundaryApp/myInfo',
name: 'myInfo',
component: () => import('@/views/MBoundaryApp/myInfo.vue'),
meta: {
title: '個人信息',
icon: 'self-user-info'
}
}
]
},
{
path: '/MEcoApp',
name: 'MEcoApp',
component: () => import('@/views/MEcoApp/index.vue'),
meta: {
title: '夢贏開發(fā)平臺'
}
},
{
path: '/test',
name: 'test',
component: () => import('@/views/test/index.vue'),
meta: {
title: 'test'
}
},
{
path: '/testa',
name: 'testa',
component: () => import('@/views/test/testa.vue'),
meta: {
title: 'testa'
}
},
{
path: '/subject-module',
name: 'subjectModule',
component: () => import('@/views/subjectModule/index.vue'),
meta: {
title: 'subjectModule'
}
}
]
}
]
顯示效果
1656399964139.png
示例2：側(cè)邊菜單做父菜單，頂部菜單做子菜單
將示例1中的topMenuStep和siderMenuStep交換值即可
顯示效果
1656400437631.png
示例3：一級子路由做頂部菜單，三級子路由做側(cè)邊菜單,路由中需要重定向，以確?？梢阅J(rèn)訪問到三級子路由
export const customPageRouter: RouteRecordRaw[] = [
// 自定義的菜單布局頁面
{
path: '/',
name: 'MChain',
component: () => import('@/layout/MChain-menu-layout.vue'),
redirect: '/MBoundaryApp',
meta: {
title: '夢鏈工作臺',
topMenuStep:1,// 想要將第幾級子菜單作為頂部菜單,如果設(shè)置為0或不設(shè)置則表示沒有相應(yīng)菜單
siderMenuStep: 3 // 想要將第幾級子菜單作為側(cè)邊菜單，示例：/MBoundaryApp 是1級子菜單，/MBoundaryApp/subject是2級子菜單
},
children: [
{
path: '/MBoundaryApp',
name: 'MBoundaryApp',
redirect: '/MBoundaryApp/subject',
component: () => import('@/views/MBoundaryApp/index.vue'),
meta: {
title: '夢境認(rèn)知環(huán)境',
hideChildrenInMenu:true //是否在自身中隱藏子菜單,如果不設(shè)置則默認(rèn)顯示
},
children: [
{
path: '/MBoundaryApp/subject',
name: 'subject',
redirect:'/MBoundaryApp/subject/test',//如果頂部菜單和側(cè)邊菜單是父孫或更遠(yuǎn)的關(guān)系，那么默認(rèn)需要加上重定向，用來默認(rèn)展示孫子菜單
component: () => import('@/views/MBoundaryApp/subject.vue'),
meta: {
title: '學(xué)科模塊',
icon: 'self-epai-fa-pzgl',
},
children:[
{
path: '/MBoundaryApp/subject/test',
name: 'subject-test',
component: () => import('@/views/test/index.vue'),
meta: {
title: 'test'
}
},
]
},
{
path: '/MBoundaryApp/myProject',
name: 'myProject',
component: () => import('@/views/MBoundaryApp/myProjects.vue'),
meta: {
title: '我的項(xiàng)目',
icon: 'self-xiangmuguanli'
}
},
{
path: '/MBoundaryApp/myOperation',
name: 'myOperation',
component: () => import('@/views/MBoundaryApp/myOperation.vue'),
meta: {
title: '我的運(yùn)營',
icon: 'self-xiangmuguanli'
}
},
{
path: '/MBoundaryApp/myInfo',
name: 'myInfo',
component: () => import('@/views/MBoundaryApp/myInfo.vue'),
meta: {
title: '個人信息',
icon: 'self-user-info'
}
}
]
},
{
path: '/MEcoApp',
name: 'MEcoApp',
component: () => import('@/views/MEcoApp/index.vue'),
meta: {
title: '夢贏開發(fā)平臺'
}
},
{
path: '/test',
name: 'test',
component: () => import('@/views/test/index.vue'),
meta: {
title: 'test'
}
},
{
path: '/testa',
name: 'testa',
component: () => import('@/views/test/testa.vue'),
meta: {
title: 'testa'
}
},
{
path: '/subject-module',
name: 'subjectModule',
component: () => import('@/views/subjectModule/index.vue'),
meta: {
title: 'subjectModule'
}
}
]
}
]
顯示效果
1656400873988.png
示例4：1級路由做頂部菜單，2級路由做側(cè)邊菜單，同時側(cè)邊菜單要展示子菜單，這種情況需要搭配路由重定向，以確定默認(rèn)選中的最末級子菜單
export const customPageRouter: RouteRecordRaw[] = [
// 自定義的菜單布局頁面
{
path: '/',
name: 'MChain',
component: () => import('@/layout/MChain-menu-layout.vue'),
redirect: '/MBoundaryApp',
meta: {
title: '夢鏈工作臺',
topMenuStep:1,// 想要將第幾級子菜單作為頂部菜單,如果設(shè)置為0或不設(shè)置則表示沒有相應(yīng)菜單
siderMenuStep: 2 // 想要將第幾級子菜單作為側(cè)邊菜單，示例：/MBoundaryApp 是1級子菜單，/MBoundaryApp/subject是2級子菜單
},
children: [
{
path: '/MBoundaryApp',
name: 'MBoundaryApp',
redirect: '/MBoundaryApp/subject',
component: () => import('@/views/MBoundaryApp/index.vue'),
meta: {
title: '夢境認(rèn)知環(huán)境',
hideChildrenInMenu:true //是否在自身中隱藏子菜單,如果不設(shè)置則默認(rèn)顯示
},
children: [
{
path: '/MBoundaryApp/subject',
name: 'subject',
redirect:'/MBoundaryApp/subject/myProject',
component: () => import('@/views/MBoundaryApp/subject.vue'),
meta: {
title: '學(xué)科模塊',
icon: 'self-epai-fa-pzgl',
},
children:[
{
path: '/MBoundaryApp/subject/myProject',
name: 'subject-myProject',
component: () => import('@/views/MBoundaryApp/myProjects.vue'),
meta: {
title: '我的項(xiàng)目',
icon: 'self-xiangmuguanli'
}
},
]
},
{
path: '/MBoundaryApp/myProject',
name: 'myProject',
component: () => import('@/views/MBoundaryApp/myProjects.vue'),
meta: {
title: '我的項(xiàng)目',
icon: 'self-xiangmuguanli'
}
},
{
path: '/MBoundaryApp/myOperation',
name: 'myOperation',
component: () => import('@/views/MBoundaryApp/myOperation.vue'),
meta: {
title: '我的運(yùn)營',
icon: 'self-xiangmuguanli'
}
},
{
path: '/MBoundaryApp/myInfo',
name: 'myInfo',
component: () => import('@/views/MBoundaryApp/myInfo.vue'),
meta: {
title: '個人信息',
icon: 'self-user-info'
}
}
]
},
{
path: '/MEcoApp',
name: 'MEcoApp',
component: () => import('@/views/MEcoApp/index.vue'),
meta: {
title: '夢贏開發(fā)平臺'
}
},
{
path: '/test',
name: 'test',
component: () => import('@/views/test/index.vue'),
meta: {
title: 'test'
}
},
{
path: '/testa',
name: 'testa',
component: () => import('@/views/test/testa.vue'),
meta: {
title: 'testa'
}
},
{
path: '/subject-module',
name: 'subjectModule',
component: () => import('@/views/subjectModule/index.vue'),
meta: {
title: 'subjectModule'
}
}
]
}
]
顯示效果
image.png
