vue+element 实现动态匹配三级菜单封装

场景：vue+element动态匹配多级菜单

//循环菜单树
<el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      router
      @select="handleSelect"
    >
<template v-for="(item,index) in routerArr">
//第一级，如果没有下级菜单，则直接显示，否则，进行二级菜单判断
         <el-menu-item :key="index" v-if="!item.children||!item.children.length>0" :index="item.router">{{item.title}}</el-menu-item>
          //二级菜单判断
         <el-submenu :key="index" v-else :index="item.router">
           <template slot="title">{{item.title}}</template>
            //  二级菜单树循环
            <template v-for="(val,ind) in item.children"> 
                //  这里判断如果没有三级菜单，则直接显示
                 <el-menu-item v-if="!val.children" :key="ind" :index="val.router">
                   <template>
                    {{val.title}}
                  </template>
                 </el-menu-item>
                  //三级菜单显示
                  <template v-else>
                    <el-submenu :key="ind" :index="val.router">
                     <template slot="title">
                      {{val.title}}
                    </template>
                    //三级菜单循环
                    <el-menu-item v-for="(tem,indx) in val.children" :key="indx" :index="tem.router"> {{tem.title}}                  
                    </el-menu-item>
                    </el-submenu>
                  </template>              
            </template>
         </el-submenu>
    </template>
</el-menu>

routerArr:[
          {
            router:'/dashboard',
            title:'一级菜单',
          },
          {
            router:'/dbuser',
            title:'二级菜单',
            children:[
              {
                router:'/userLabel',
                title:'二级菜单跳转1',
              },
              {
                router:'/around',
                title:'二级菜单跳转2',
              },
              {
                router:'/itSystem',
                title:'二级菜单跳转3',
              },
            ]
          },
          {
            router:'/dictionary',
            title:'三级菜单',
            children:[
              {
                router:'/dictionary11',
                title:'三级菜单1',
                children:[
                  {
                    router:'/dictionary111',
                    title:'三级菜单跳转1-1',
                  },
                  {
                    router:'/dictionary1112',
                    title:'三级菜单跳转1-2',
                  },
                  {
                    router:'/dictionary113',
                    title:'三级菜单跳转1-3',
                  },
                  
                ]
              },
              {
                  router:'/dictionary12',
                  title:'三级菜单2',
                  children:[
                    {
                      router:'/dictionary121',
                      title:'三级菜单跳转2-1',
                    },
                    {
                      router:'/dictionary122',
                      title:'三级菜单跳转2-2',
                    },
                ]
              }
            ]
          },
]