这里是根据vue-router和element-ui中的NavMenu进行组合。根据路由配置动态的渲染NavMenu
注意:

// 获取到所有的路由
routes=this.$router.options.routes

通常将这个路由分开，分为父组件和子组件
父组件：

<el-menu :default-active="$route.path" router>
  <menuItem v-for="(item,index) in routes" :item="item" :key="index"></menuItem>
</el-menu>

子组件：

<div>
<!--这个表示有子菜单的情况下，才会显示-->
<el-submenu :index="item.path" v-if="item.children && item.children.length>0">
  <template slot="title">
    <i class="icon iconfont" :class="item.icon"></i>
    <span slot="title">{{item.name}}</span>
  </template>
  <template v-for="(routePath,index) in item.children">
 // **注意**这个表示判断子菜单下面是否还有三级和四级菜单
    <menuItem :item="routePath" :key="index" v-if="routePath.children && routePath.children.length>0"></menuItem>
    <el-menu-item v-else :index="item.path+'/'+routePath.path" :key="index">
      <i class="icon iconfont" :class="routePath.icon"></i>
      <span slot="title">{{routePath.name}}</span>
    </el-menu-item>
  </template>
</el-submenu>

<!--表示一级菜单-->
<el-menu-item v-else :index="item.path">
  <i class="icon iconfont" :class="item.icon"></i>
  <span slot="title">{{item.name}}</span>
</el-menu-item>

**注意：**要在一个组件中，递归调用他自己需要在这个组件上面，要设置name名字。 在动态加载导航时，若一个标题是一个三级标题，那么他的path路径（是绝对路径）的组成是由：/（根路径）/一级标题路径/二级标题路径/三级标题路径组成。多级标题的path都是绝对路径，并且是路由出口