一、路由页面 index.js
{
path:'/dashboardHome',
component: Main,
children:[
{
path: '/dashboardHome',
component: DashboardHome,
type:'ios-ionitron-outline',
meta: {
title:'仪表盘',
order:"0-4",
requireAuth: true
}
}
]
},
{
path:'/cases',
component: Main,
type:"ios-briefcase-outline",
meta: {
title:'案例',
order:"6",
requireAuth: true
},
children:[
{
path: '/cases/case',
component: Case,
meta: {
title:'列表',
order:"6-1",
requireAuth: true
}
},
{
path: '/cases/caseDetail',
component: CaseDetail,
meta: {
title:'列表',
order:"6-1",
requireAuth: true
}
},
{
path: '/cases/dashboard',
component: Dashboard,
meta: {
title:'Dashboard',
order:"6-2",
requireAuth: true
}
},
{
path: '/cases/keyPerformanceIndication',
component: KeyPerformanceIndication,
meta: {
title:'KPI',
order:"6-3",
requireAuth: true
}
},
{
path: '/cases/satisfaction',
component: Satisfaction,
meta: {
title:'满意度',
order:"6-4",
requireAuth: true
}
}
]
},
{
path:'/monitor',
component: Main,
type:"ios-eye-outline",
meta: {
title:'监控告警管理',
order:"1",
requireAuth: true
},
children:[
{
path: '/monitor/elasticComputeCloudMonitor',
component: ElasticComputeCloudMonitor,
meta: {
title:'实例',
order:"1-1",
requireAuth: true
}
},
{
path: '/monitor/elasticComputeCloudDetail',
component: ElasticComputeCloudDetail,
meta: {
title:'实例',
order:"1-1",
requireAuth: true
}
},
{
path: '/monitor/elasticComputeCloudWarning',
component: ElasticComputeCloudWarning,
meta: {
title:'实例',
order:"1-1",
requireAuth: true
}
},
{
path: '/monitor/instance',
component: Instance,
meta: {
title:'实例',
order:"1-1",
requireAuth: true
}
},
{
path: '/monitor/elasticBlockStoreMonitor',
component: ElasticBlockStoreMonitor,
meta: {
title:'磁盘',
order:"1-2",
requireAuth: true
}
},
{
path: '/monitor/elasticBlockStoreDetail',
component: ElasticBlockStoreDetail,
meta: {
title:'磁盘',
order:"1-2",
requireAuth: true
}
},
{
path: '/monitor/elasticBlockStoreWarning',
component: ElasticBlockStoreWarning,
meta: {
title:'磁盘',
order:"1-2",
requireAuth: true
}
},
{
path: '/monitor/ebs',
component: EBS,
meta: {
title:'磁盘',
order:"1-2",
requireAuth: true
}
},
{
path: '/monitor/relationalDatabaseServiceMonitor',
component: RelationalDatabaseServiceMonitor,
meta: {
title:'数据库',
order:"1-3",
requireAuth: true
}
},
{
path: '/monitor/relationalDatabaseServiceDetail',
component: RelationalDatabaseServiceDetail,
meta: {
title:'数据库',
order:"1-3",
requireAuth: true
}
},
{
path: '/monitor/RelationalDatabaseServiceWarning',
component: RelationalDatabaseServiceWarning,
meta: {
title:'数据库',
order:"1-3",
requireAuth: true
}
},
{
path: '/monitor/RDS',
component: RDS,
meta: {
title:'数据库',
order:"1-3",
requireAuth: true
}
},
{
path: '/monitor/billingMonitor',
component: BillingMonitor,
meta: {
title:'财务',
order:"1-4",
requireAuth: true
}
},
{
path: '/logs',
component: ThirdMainLogs,
meta: {
title:'日志',
order:"1-5",
requireAuth: true
},
children:[
{
path: '/logs/logMonitor',
component: LogMonitor,
meta: {
title:'应用',
order:"1-5-1",
requireAuth: true
}
},
{
path: '/logs/security',
component: Security,
meta: {
title:'安全(ActionTrail)',
order:"1-5-2",
requireAuth: true
}
},
{
path: '/logs/cloudTrail',
component: CloudTrail,
meta: {
title:'安全(CloudTrail)',
order:"1-5-3",
requireAuth: true
}
}
]
},
{
path: '/monitor/messageQueueMonitor',
component: MessageQueueMonitor,
meta: {
title:'队列',
order:"1-6",
requireAuth: true
}
},
{
path: '/monitor/messageQueueDetail',
component: MessageQueueDetail,
meta: {
title:'队列',
order:"1-6",
requireAuth: true
}
},
{
path: '/monitor/messageQueue',
component: MessageQueue,
meta: {
title:'队列',
order:"1-6",
requireAuth: true
}
},
{
path: '/monitor/objectStorageMonitor',
component: ObjectStorageMonitor,
meta: {
title:'对象存储',
order:"1-7",
requireAuth: true
}
},
{
path: '/monitor/objectStorageDetail',
component: ObjectStorageDetail,
meta: {
title:'对象存储',
order:"1-7",
requireAuth: true
}
},
{
path: '/monitor/objectStorage',
component: ObjectStorage,
meta: {
title:'对象存储',
order:"1-7",
requireAuth: true
}
},
{
path: '/monitor/logManagementMonitor',
component: LogManagementMonitor,
meta: {
title:'日志管理',
order:"1-8",
requireAuth: true
}
},
{
path: '/monitor/logManagementDetail',
component: LogManagementDetail,
meta: {
title:'日志管理',
order:"1-8",
requireAuth: true
}
},
{
path: '/monitor/logManagement',
component: LogManagement,
meta: {
title:'日志管理',
order:"1-8",
requireAuth: true
}
},
{
path: '/network',
component: ThirdMain,
meta: {
title:'网络',
order:"1-9",
requireAuth: true
},
children:[
{
path: '/network/cenMonitor',
component: CenMonitor,
meta: {
title:'CEN',
order:"1-9-1",
requireAuth: true
}
},
{
path: '/network/cenDetail',
component: CenDetail,
meta: {
title:'CEN',
order:"1-9-1",
requireAuth: true
}
},
{
path: '/network/cen',
component: CEN,
meta: {
title:'CEN',
order:"1-9-1",
requireAuth: true
}
},
{
path: '/network/slbMonitor',
component: SlbMonitor,
meta: {
title:'负载均衡',
order:"1-9-2",
requireAuth: true
}
},
{
path: '/network/slbWarning',
component: SlbWarning,
meta: {
title:'负载均衡',
order:"1-9-2",
requireAuth: true
}
},
{
path: '/network/slbDetail',
component: SlbDetail,
meta: {
title:'负载均衡',
order:"1-9-2",
requireAuth: true
}
},
{
path: '/network/slb',
component: SLB,
meta: {
title:'负载均衡',
order:"1-9-2",
requireAuth: true
}
},
{
path: '/network/agwMonitor',
component: AgwMonitor,
meta: {
title:'应用程序网关(Azure)',
order:"1-9-3",
requireAuth: true
}
},
{
path: '/network/agwDetail',
component: AgwDetail,
meta: {
title:'应用程序网关(Azure)',
order:"1-9-3",
requireAuth: true
}
},
{
path: '/network/agwWarning',
component: AgwWarning,
meta: {
title:'应用程序网关(Azure)',
order:"1-9-3",
requireAuth: true
}
},
{
path: '/network/agw',
component: AGW,
meta: {
title:'应用程序网关(Azure)',
order:"1-9-3",
requireAuth: true
}
}
]
}
]
},
{
path:'/instanceLists',
type:'ios-photos-outline',
component: Main,
meta: {
title:'实例列表',
order:"2",
requireAuth: true
},
children:[
{
path: '/instanceLists/instanceList',
component: InstanceList,
meta: {
title:'太古实例列表',
order:"2-1",
requireAuth: true
}
}
]
},
{
path:'/alarmContact',
component: Main,
children:[
{
path: '/alarmContact',
component: AlarmContact,
type:'ios-people-outline',
meta: {
title:'报警联系人',
order:"0-2",
requireAuth: true
}
}
]
},
{
path:'/timerSwitchs',
type:'ios-stopwatch-outline',
component: Main,
meta: {
title:'定时开关机',
order:"3",
requireAuth: true
},
children:[
{
path: '/timerSwitchs/serverSearchs',
component: ServerSearchs,
meta: {
title:'查询',
order:"3-1",
requireAuth: true
}
},
{
path: '/timerSwitchs/auditTask',
component: AuditTask,
meta: {
title:'审核定时开关机',
order:"3-2",
requireAuth: true
}
}
]
},
{
path:'/approvalTask',
component: Main,
children:[
{
path: '/approvalTask',
component: ApprovalTask,
type:'ios-create-outline',
meta: {
title:'审批任务',
order:"0-6",
requireAuth: true
}
},
{
path: '/approvalTask/approvalTaskDetail',
component: ApprovalTaskDetail,
meta: {
title:'审批任务详情',
order:"0-6",
requireAuth: true
}
}
]
},
{
path:'/ebilling',
type:'logo-bitcoin',
component: Main,
meta: {
title:'账单',
order:"8",
requireAuth: true
},
children:[
{
path: '/ebilling/RIPage',
component: RIPage,
meta: {
title:'RI页面',
order:"8-1",
requireAuth: true
}
},
{
path: '/ebilling/billingPage',
component: BillingPage,
meta: {
title:'账单页面',
order:"8-2",
requireAuth: true
}
},
{
path: '/ebilling/slBillingPage',
component: SlBillingPage,
meta: {
title:'冠闵账单页面',
order:"8-3",
requireAuth: true
}
}
]
},
{
path:'/patchManagement',
type:'logo-pinterest',
component: Main,
meta: {
title:'补丁管理',
order:"9",
requireAuth: true
},
children:[
{
path: '/patchManagement/patchMonitor',
component: PatchMonitor,
meta: {
title:'补丁监视器',
order:"9-1",
requireAuth: true
}
},
{
path: '/patchManagement/policies',
component: Policies,
meta: {
title:'补丁策略',
order:"9-2",
requireAuth: true
}
},
{
path: '/patchManagement/patchBaselineConfiguration',
component: PatchBaselineConfiguration,
meta: {
title:'补丁基准配置',
order:"9-2",
requireAuth: true
}
},
{
path: '/patchManagement/patchCommandParameters',
component: PatchCommandParameters,
meta: {
title:'命令列表',
order:"9-3",
requireAuth: true
}
},
{
path: '/patchManagement/commandDetail',
component: CommandDetail,
meta: {
title:'命令详情',
order:"9-3",
requireAuth: true
}
},
{
path: '/patchManagement/addOrUpdateRunCommands',
component: AddOrUpdateRunCommands,
meta: {
title:'运行命令',
order:"9-2",
requireAuth: true
}
},
{
path: '/patchManagement/commandHistoryDetail',
component: CommandHistoryDetail,
meta: {
title:'命令历史记录',
order:"9-3",
requireAuth: true
}
}
]
},
{
path:'/ruleEngine',
component: Main,
children:[
{
path: '/ruleEngine',
component: RuleEngine,
type:'ios-disc-outline',
meta: {
title:'规则引擎',
order:"0-5",
requireAuth: true
}
}
]
},
{
path:'/configuration',
component: Main,
type:"ios-construct-outline",
meta: {
title:'配置管理',
order:"10",
requireAuth: true
},
children:[
{
path:'/configurationManagement',
component: Fourth,
meta: {
title:'报警配置管理',
order:"10-1",
requireAuth: true
},
children:[
{
path: '/configurationManagement/systemTask',
component: SystemTask,
meta: {
title:'定时任务配置',
order:"10-1-1",
requireAuth: true
}
},
{
path: '/configurationManagement/customerDefinedAlarmConfiguration',
component: CustomerDefinedAlarmConfiguration,
meta: {
title:'客户自定义报警配置',
order:"10-1-2",
requireAuth: true
}
},
{
path: '/configurationManagement/alertRuleLists',
component: AlertRuleLists,
meta: {
title:'报警规则一览表',
order:"10-1-2",
requireAuth: true
}
},
{
path: '/configurationManagement/defaultAlarmConfiguration',
component: DefaultAlarmConfiguration,
meta: {
title:'默认报警配置',
order:"10-1-3",
requireAuth: true
}
},
{
path: '/configurationManagement/schedules',
component: Schedules,
meta: {
title:'调度管理',
order:"10-1-4",
requireAuth: true
}
},
{
path: '/configurationManagement/securityLogConfiguration',
component: SecurityLogConfiguration,
meta: {
title:'安全日志配置',
order:"10-1-5",
requireAuth: true
}
}
]
},
{
path:'/permissionsConfigurationManagement',
component: Fifth,
meta: {
title:'权限配置管理',
order:"10-2",
requireAuth: true
},
children:[
{
path: '/permissionsConfigurationManagement/accounts',
component: Accounts,
meta: {
title:'账户',
order:"10-2-1",
requireAuth: true
}
},
{
path: '/permissionsConfigurationManagement/user',
component: Users,
meta: {
title:'用户管理',
order:"10-2-2",
requireAuth: true
}
},
{
path: '/permissionsConfigurationManagement/roleManagement',
component: RoleManagement,
meta: {
title:'角色管理',
order:"10-2-3",
requireAuth: true
}
},
{
path: '/permissionsConfigurationManagement/group',
component: Groups,
meta: {
title:'组管理',
order:"10-2-4",
requireAuth: true
}
},
{
path: '/permissionsConfigurationManagement/resourcePermission',
component: ResourcePermission,
meta: {
title:'组管理',
order:"10-2-4",
requireAuth: true
}
},
{
path: '/permissionsConfigurationManagement/accountGroup',
component: AccountGroup,
meta: {
title:'账户组管理',
order:"10-2-5",
requireAuth: true
}
},
{
path: '/permissionsConfigurationManagement/accountGroupConfig',
component: AccountGroupConfig,
meta: {
title:'账户组管理',
order:"10-2-5",
requireAuth: true
}
}
]
},
{
path: '/configuration/approvalFlowConfiguration',
component: ApprovalFlowConfiguration,
meta: {
title:'审批流配置管理',
order:"10-3",
requireAuth: true
}
},
{
path:'/resourceConfigurationManagement',
component: Fifth,
meta: {
title:'资源配置管理',
order:"10-4",
requireAuth: true
},
children:[
{
path: '/resourceConfigurationManagement/aws',
component: Sixth,
meta: {
title:'AWS',
order:"10-4-1",
requireAuth: true
},
children:[
{
path: '/resourceConfigurationManagement/aws/elasticComputeCloudResource',
component: ElasticComputeCloudResource,
meta: {
title:'计算实例',
order:"10-4-1-1",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/relationalDatabaseServiceResource',
component: RelationalDatabaseServiceResource,
meta: {
title:'数据库',
order:"10-4-1-2",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/virtualPrivateCloudResource',
component: VirtualPrivateCloudResource,
meta: {
title:'虚拟网络',
order:"10-4-1-3",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/elasticBlockStoreResource',
component: ElasticBlockStoreResource,
meta: {
title:'弹性块存储',
order:"10-4-1-4",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/elasticLoadBalancingResource',
component: ElasticLoadBalancingResource,
meta: {
title:'弹性负载均衡',
order:"10-4-1-5",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/simpleStorageServiceResource',
component: SimpleStorageServiceResource,
meta: {
title:'存储桶',
order:"10-4-1-6",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/identityAndAccessManagementResource',
component: IdentityAndAccessManagementResource,
meta: {
title:'身份和访问管理',
order:"10-4-1-7",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/redshiftResource',
component: RedshiftResource,
meta: {
title:'redshift',
order:"10-4-1-8",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/elasticacheResource',
component: ElasticacheResource,
meta: {
title:'弹性缓存',
order:"10-4-1-9",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/reservedInstanceResource',
component: ReservedInstanceResource,
meta: {
title:'RI价格计算',
order:"10-4-1-10",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/elasticResource',
component: ElasticResource,
meta: {
title:'弹性IP',
order:"10-4-1-11",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/routeResource',
component: RouteResource,
meta: {
title:'路由表',
order:"10-4-1-12",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/gatewayResource',
component: GatewayResource,
meta: {
title:'网关',
order:"10-4-1-13",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/aws/subnetResource',
component: SubnetResource,
meta: {
title:'子网',
order:"10-4-1-14",
requireAuth: true
}
}
]
},
{
path: '/resourceConfigurationManagement/azure',
component: Seventh,
meta: {
title:'Azure',
order:"10-4-2",
requireAuth: true
},
children:[
{
path: '/resourceConfigurationManagement/azure/elasticComputeCloudResourceAzure',
component: ElasticComputeCloudResourceAzure,
meta: {
title:'虚拟机',
order:"10-4-2-1",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/azure/relationalDatabaseServiceResourceAzure',
component: RelationalDatabaseServiceResourceAzure,
meta: {
title:'数据库',
order:"10-4-2-2",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/azure/virtualPrivateCloudResourceAzure',
component: VirtualPrivateCloudResourceAzure,
meta: {
title:'虚拟网络',
order:"10-4-2-3",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/azure/elasticBlockStoreResourceAzure',
component: ElasticBlockStoreResourceAzure,
meta: {
title:'托管磁盘',
order:"10-4-2-4",
requireAuth: true
}
},
{
path: '/resourceConfigurationManagement/azure/simpleStorageServiceResourceAzure',
component: SimpleStorageServiceResourceAzure,
meta: {
title:'存储账户',
order:"10-4-2-5",
requireAuth: true
}
}
]
}
]
}
]
},
{
path:'/aiMonitor',
type:'logo-reddit',
component: Main,
meta: {
title:'AI监控',
order:"12",
requireAuth: true
},
children:[
{
path: '/aiMonitor/aiDashboard',
component: AIDashboard,
meta: {
title:'仪表盘',
order:"12-1",
requireAuth: true
}
},
{
path: '/aiMonitor/instanceDetail',
component: InstanceDetail,
meta: {
title:'仪表盘',
order:"12-1",
requireAuth: true
}
},
{
path: '/aiMonitor/databaseDetail',
component: DatabaseDetail,
meta: {
title:'仪表盘',
order:"12-1",
requireAuth: true
}
},
{
path: '/aiMonitor/operatingSystem',
component: OperatingSystem,
meta: {
title:'应用系统',
order:"12-2",
requireAuth: true
}
},
{
path: '/aiMonitor/applicationConfiguration',
component: ApplicationConfiguration,
meta: {
title:'应用系统',
order:"12-2",
requireAuth: true
}
}
]
}
引入Test文件路径
// 三级菜单
import Test from '@/components/instance_lists/Test'
二、路由页面
1.新建三级菜单路由页面 路由文件摆放位置
2.Test.vue
<template>
<router-view></router-view>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
三、主页面 main.vue
1.静态menu
<Menu
ref="leftmenu"
@on-select="selectItem"
@on-open-change="isCollapsed=false"
:active-name="activeName"
theme="dark"
width="auto"
:accordion="true"
:open-names="opennames"
:class="menuitemClasses">
<!-- 静态菜单 -->
<MenuItem name="0-1" to="/">
<Icon type="ios-briefcase-outline"></Icon>
<span>案例</span>
</MenuItem>
<Submenu name="1">
<template slot="title">
<Icon type="ios-eye-outline"></Icon>
<span>告警列表</span>
</template>
<Submenu name="1-1">
<template slot="title">
<span>实例列表</span>
</template>
<MenuItem name="1-1-1" to="/monitor/elasticComputeCloudMonitor">实例</MenuItem>
<MenuItem name="1-1-2" to="/instanceLists/instanceList">太古实例列表</MenuItem>
</Submenu>
<MenuItem name="1-2" to="/monitor/elasticBlockStoreMonitor">存储</MenuItem>
<MenuItem name="1-3" to="/monitor/relationalDatabaseServiceMonitor">数据库</MenuItem>
<MenuItem name="1-4" to="/monitor/billingMonitor">财务</MenuItem>
<MenuItem name="1-5" to="/monitor/logMonitor">日志</MenuItem>
</Submenu>
<MenuItem name="0-2" to="/alarmContact">
<Icon type="ios-people-outline"></Icon>
<span>报警联系人</span>
</MenuItem>
<Submenu name="3">
<template slot="title">
<Icon type="ios-stopwatch-outline"></Icon>
<span>定时开关机</span>
</template>
<MenuItem name="3-1" to="/timerSwitchs/serverSearchs">查询</MenuItem>
</Submenu>
<MenuItem name="0-3" to="/auditTask">
<Icon type="ios-clipboard-outline"></Icon>
<span>审核任务</span>
</MenuItem>
<Submenu name="4">
<template slot="title">
<Icon type="ios-briefcase-outline"></Icon>
<span>报警配置管理</span>
</template>
<MenuItem name="4-1" to="/configurationManagement/systemTask">定时任务配置</MenuItem>
<MenuItem name="4-2" to="/configurationManagement/customerDefinedAlarmConfiguration">客户自定义报警配置</MenuItem>
<MenuItem name="4-3" to="/configurationManagement/defaultAlarmConfiguration">默认报警配置</MenuItem>
</Submenu>
<Submenu name="5">
<template slot="title">
<Icon type="ios-briefcase-outline"></Icon>
<span>权限配置管理</span>
</template>
<MenuItem name="5-1" to="/permissionsConfigurationManagement/accounts">账户</MenuItem>
<MenuItem name="5-2" to="/permissionsConfigurationManagement/user">用户管理</MenuItem>
<MenuItem name="5-3" to="/permissionsConfigurationManagement/roleManagement">角色管理</MenuItem>
<MenuItem name="5-4" to="/permissionsConfigurationManagement/group">组管理</MenuItem>
<MenuItem name="5-4" to="/permissionsConfigurationManagement/resourcePermission">组管理</MenuItem>
</Submenu>
</Menu>
2.动态menu
Main.vue
引用多级菜单(自行放到该放的地方)
import leftMenuNav from './leftMenuNav'
components: {leftMenuNav},
<Menu ref="leftmenu" @on-select="selectItem" @on-open-change="isCollapsed=false" :active-name="activeName" theme="dark" width="auto" :accordion="true" :open-names="opennames" :class="menuitemClasses">
<!-- 动态菜单 -->
<div v-for="item in menuList">
<template v-if="item.type">
<left-menu-nav :menuList='item' :key='item.meta.order'>
</left-menu-nav>
</template>
<template v-else>
<div v-for="main in item.children">
<menu-item :name="main.meta.order" :to="main.path" :key='main.meta.order'>
<Icon :type="main.type" />
<span>{{ main.meta.title }}</span>
</menu-item>
</div>
</template>
</div>
</Menu>
3.多级菜单刷新收缩问题
created(){
// 多级菜单 刷新收缩问题
if(this.$route.meta && this.$route.meta.order){
// 当前高亮
this.activeName = this.$route.meta.order;
this.submenuname=this.$route.meta.order.split('-');
if(this.submenuname.length==4){
// 四级菜单
this.opennames=[this.$route.meta.order.split('-')[0],this.$route.meta.order.split('-')[0]+'-'+this.$route.meta.order.split('-')[1],this.$route.meta.order.split('-')[0]+'-'+this.$route.meta.order.split('-')[1]+'-'+this.$route.meta.order.split('-')[2]];
}else if(this.submenuname.length==3){
// 三级菜单
this.opennames=[this.$route.meta.order.split('-')[0],this.$route.meta.order.split('-')[0]+'-'+this.$route.meta.order.split('-')[1]];
}else if(this.submenuname.length==2&&this.submenuname[0]!=="0"){
// 二级菜单
this.opennames.push(this.$route.meta.order.split('-')[0]);
}
}
}
4.多级菜单 leftMenuNav.vue
<template>
<Submenu :name="menuList.meta.order">
<!-- 父级菜单 -->
<template slot="title">
<Icon :type="menuList.type" />
<span>{{ menuList.meta.title }}</span>
</template>
<template v-for="item in menuList.children">
<!-- 如果还有子集,继续调用 -->
<left-menu-nav v-if="item.children&&item.children.length!==0" :menuList='item' :key='item.index'>
</left-menu-nav>
<!-- 子菜单 -->
<menu-item v-else :key="item.id" :name="item.meta.order" :to="item.path">
<Icon :type="item.type" />
<span>{{ item.meta.title }}</span>
</menu-item>
</template>
</Submenu>
</template>
<script>
export default {
name: 'leftMenuNav',
props: {
menuList: {
type: Object,
default: () => { }
}
},
data () {
return {
}
}
}
</script>
<style scoped>
</style>