vue iview动态路由 多级菜单

一、路由页面 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>