vue左侧导航栏动态绑定路由，换成横向动态导航栏，并改布局

1.官网静态导航栏分析

<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1">处理中心</el-menu-item>
  无下拉的菜单
  <el-submenu index="2">
  下拉菜单
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>
  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>

2.router数据格式

  {
    path: '/model',
    component: Layout,
    redirect: upload,
    name: '模型管理',
    meta: {title: '模型管理', icon: 'tree'},
    children: [
      {
        path: 'upload',
        name: '上传模型',
        component: upload,
        meta: {title: '上传模型', icon: 'example'},
        menu: 'upload'
      },
      {
        path: 'cluster',
        name: '查看模型',
        component: cat,
        meta: {title: '查看模型', icon: 'example'},
        menu: 'cat'
      }
    ]
  },
  {
    path: '/production',
    component: Layout,
    redirect: inj_pro,
    name: '生产优化',
    meta: {title: '生产优化', icon: 'table'},
    children: [
      {
        path: 'injec_pro',
        name: '注采优化',
        component: inj_pro,
        meta: {title: '注采优化', icon: 'user'},
        menu: 'injec_pro'
      },
      {
        path: 'well_loc',
        name: '井位优化',
        component: well_loc,
        meta: {title: '井位优化', icon: 'user'},
        menu: 'well_loc'
      },
      {
        path: 'method',
        name: '措施优化',
        component: method,
        meta: {title: '措施优化', icon: 'user'},
        menu: 'method'
      },
      {
        path: 'formation',
        name: '层位优化',
        component: formation,
        meta: {title: '层位优化', icon: 'user'},
        menu: 'formation'
      },
      {
        path: 'all',
        name: '整体优化',
        component: all,
        meta: {title: '整体优化', icon: 'password'},
        menu: 'all'
      },
    ]
  },

3.动态导航栏分析
组件位置

    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse"
             background-color="gray" text-color="#fff" active-text-color="#409EFF">
      <sidebar-item :routes="permission_routers"></sidebar-item> 调用了自定义的组件
    </el-menu>

4.自定义组件sidebar

<template>

  <div class="menu-wrapper">
  大div套起来
  
    <template v-for="item in routes" v-if="!item.hidden&&item.children">
    循环routes下的属性
    
      <router-link v-if="item.children.length===1 && !item.children[0].children" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
      1.情况1，children为1个，没有子菜单，如果子菜单，没有权限则都不显示，有则只显示子菜单，无下拉菜单，而且点击即切换
        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
         路径就是父路径加上子路径
          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
          加图标
          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
          加名字
        </el-menu-item>
      </router-link>
      //设置了菜单为横向，左浮动，宽度，默认为竖的
      <el-submenu enu v-else :index="item.name||item.path" :key="item.name" width="200px" style="float: left">
      设置了index跳转路径
      2. 情况2多个子菜单，为下拉形式
      
        <template slot="title">
        2.1先写父菜单的名字和标识
          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
        </template>
        
        <template v-for="child in item.children" v-if="!child.hidden">
        2.2再写子菜单的
          <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
          路径就是父路径加上子路径
            <el-menu-item :index="item.path+'/'+child.path">
              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
            </el-menu-item>
          </router-link>
        </template>
        </el-submenu>
    </template>

  </div>
</template>

5.设置左边缘距离