element-ui NavMenu 导航菜单 垂直菜单，可内嵌子菜单 使用

必要环境为 vue + vue-router +element

此文件只是左侧菜单组件，需要更多功能请参考element-ui 官网的 NavMenu 导航菜单

LeftAsideNav.vue 文件

<template>
  <div class="ku-aside-assembly">
    <div class="ku-menu-lsit">
      <el-menu
        :default-active="NavigationDefaultActive"
        router
        background-color="#02012b"
        text-color="#fff"
        active-text-color="#407ce7">
        <template v-for="(item,index) in menuList">
          <!--判断是否有二级-->
          <template v-if="item.submenuLsit.length>0">
            <el-submenu :index="index.toString()">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.title}}</span>
              </template>
              <el-menu-item-group>
                <template v-for="(item2,index2) in item.submenuLsit">
                  <!--判断是否有第三级-->
                  <template v-if="item2.submenuLsit.length > 0">
                    <el-submenu :index="[index +'-'+ index2].toString()">
                      <template slot="title">{{item2.title}}</template>
                      <el-menu-item :index="item3.path" v-for="(item3,index3) in item2.submenuLsit">{{item3.title}}
                      </el-menu-item>
                    </el-submenu>
                  </template>
                  <el-menu-item v-else :index="item2.path">
                    {{item2.title}}
                  </el-menu-item>
                </template>
              </el-menu-item-group>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.path">
              <i class="el-icon-menu"></i>
              <span slot="title">{{item.title}}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script>
  // import Vue from 'vue'

  export default {
    name: 'LeftAsideNav',
    data() {
      return {
        NavigationDefaultActive: "", // 导航默认当前选择
        //  菜单列表
        menuList: [
          {
            title: '第一层1',
            icon: 'el-icon-menu',
            imgIconUrl: require('@/assets/icon/icon_project.png'),
            path: "",
            submenuLsit: [
              {
                title: '第二层1',
                icon: 'el-icon-menu',
                imgIconUrl: require('@/assets/icon/icon_project.png'),
                path: "",
                submenuLsit: [
                  {
                    title: '第三层1',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList1",
                  },
                  {
                    title: '第三层2',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList2",
                  },
                  {
                    title: '第三层3',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList3",
                  }
                ]
              },
              {
                title: '第二层2',
                icon: 'el-icon-menu',
                imgIconUrl: require('@/assets/icon/icon_project.png'),
                path: "",
                submenuLsit: [
                  {
                    title: '第三层1',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList4",
                  },
                  {
                    title: '第三层2',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList5",
                  },
                  {
                    title: '第三层3',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList6",
                  }
                ]
              }
            ]
          },
          {
            title: '第一层1',
            icon: 'el-icon-menu',
            imgIconUrl: require('@/assets/icon/icon_project.png'),
            path: "",
            submenuLsit: [
              {
                title: '第二层1',
                icon: 'el-icon-menu',
                imgIconUrl: require('@/assets/icon/icon_project.png'),
                path: "tesss",
                submenuLsit: []
              },
              {
                title: '第二层2',
                icon: 'el-icon-menu',
                imgIconUrl: require('@/assets/icon/icon_project.png'),
                path: "",
                submenuLsit: [
                  {
                    title: '第三层1',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList7",
                  },
                  {
                    title: '第三层2',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList8",
                  },
                  {
                    title: '第三层3',
                    icon: 'el-icon-menu',
                    imgIconUrl: require('@/assets/icon/icon_project.png'),
                    path: "TemplateList9",
                  }
                ]
              }
            ]
          },
          {
            title: '第一层1',
            icon: 'el-icon-menu',
            imgIconUrl: require('@/assets/icon/icon_project.png'),
            path: "TemplateList",
            submenuLsit: []
          },
          {
            title: '第一层1',
            icon: 'el-icon-menu',
            imgIconUrl: require('@/assets/icon/icon_project.png'),
            path: "ProjectOverview",
            submenuLsit: []
          },

        ],
      }
    },
    // 引入组件
    components: {},
    // 页面加载方法
    mounted() {
      this.getRouterParmes();

    },
    // 方法集合
    methods: {
      // 获取默认选项路由 vue-router 的
      getRouterParmes: function () {
        let _that = this;
        // 获取路由需要延时获取
        setTimeout(function () {
          _that.NavigationDefaultActive = _that.$router.history.current.name || _that.$router.history.current.path.split('/')[1];
        }, 100)
      },
    }
  }
</script>

<style scoped>

</style>

element-ui css文件重置 sass 文件

// 左侧导航 start
.ku-aside-assembly{width: 215px;height: 100%;;background-color: $dark-blue-color;position: absolute;z-index: 3;overflow: auto;padding-left: 15px;
  .ku-menu-lsit{
    .el-menu{border-right: 0px;
      .el-submenu {margin-bottom: 2px;
        .el-icon-location{color: $color-white!important;}
        .el-submenu__title{height: 40px;line-height: 40px;margin-top: 2px;
          i.el-submenu__icon-arrow{color: $color-white;font-size: 14px;font-weight: bold;}
          &:hover{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
        }
        .el-menu-item{
          &.is-active{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
        }
        .el-menu{
          .el-menu-item-group{
            .el-menu-item-group__title{display: none;
            }
          }
          .el-menu{
            .el-menu-item{padding-left: 55px!important;
              &.is-active,&:hover{background-color: $dark-blue-color!important;background-image:none;color: $blue-color!important;}
            }
          }
        }
      }
      .el-menu-item{height: 40px;line-height: 40px;padding-right: 10px;margin-top: 2px;
        &.is-active{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
        i{color: $color-white;}
        &:hover{background-color: $blue-color;background-image: linear-gradient(180deg, #4B96F9 0%, #1F5FDD 100%);border-radius: 4px 0 0 4px;color: $color-white!important;}
        & + .el-menu-item{margin-top: 2px;}
      }
      >.el-submenu>.el-submenu__title{padding-left: 5px!important;}
      >.el-menu-item{padding-left: 5px!important;}
    }
  }
}
// 左侧导航 end