el-menu结合vue-router生成左侧导航栏，并设置选中状态以及hidden隐藏

1、vue-router:index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import Layout from '@/layout'


export const routes = [{
        path: '/',
        component: Layout,
        hidden: true,
        redirect: "/swiperInfo",
        name: 'Layout'
    },
    {
        path: '/login',
        component: () =>
            import ('@/views/login/login'),
        hidden: true,
        name: 'login'
    },
    {
        path: '/index',
        component: Layout,
        redirect: "/swiperInfo",
        meta: {
            name: "轮播图管理",
            icon: "el-icon-menu"
        },
        children: [{
                path: '/swiperInfo',
                component: () =>
                    import ('@/views/swiper/index'),
                // hidden: true,
                name: '轮播图信息',
                meta: {
                    name: "轮播图信息",
                    icon: "el-icon-menu",

                }
            },
            {
                path: '/addSwiper',
                component: () =>
                    import ('@/views/swiper/add-swiper'),
                name: '添加轮播图',
                // hidden: true,
                meta: {
                    name: "添加轮播图",
                    icon: "el-icon-menu",
                }
            },
            {
                path: '/updateSwiper/:id',
                component: () =>
                    import ('@/views/swiper/update-swiper'),
                name: '修改轮播图',
                hidden: true,
                meta: {
                    name: "轮播图信息",
                    icon: "el-icon-menu",
                }
            }
        ]
    },
    {
        path: '/user',
        component: Layout,
        redirect: "/userInfo",
        meta: {
            name: "个人信息管理",
            icon: "el-icon-menu"
        },
        children: [{
            path: '/userInfo',
            component: () =>
                import ('@/views/user/index'),
            // hidden: true,
            name: '用户信息',
            meta: {
                name: "用户信息",
                icon: "el-icon-menu",

            }
        }]
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router

2、SilderBar.vue

<template>
  <div id="SilderBar">
    <el-container>
      <el-aside :width="isCollapse ? '64px' : '240px'">
        <el-menu
          :default-active="$route.meta.name"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          align="left"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <div v-for="(item, index) in getRouter" :key="index">
            <div v-if="item.children.length == 1">
              <el-menu-item :index="item.children[0].meta.name" @click="$router.push(item.children[0].path)">
                <i :class="item.children[0].meta.icon"></i>
                <span slot="title" v-text="item.children[0].meta.name"></span>
              </el-menu-item>
            </div>
            <div v-else>
              <el-submenu :index="item.meta.name">
                <template slot="title">
                  <i :class="item.meta.icon"></i>
                  <span
                    slot="title"
                    v-text="item.meta.name"
                    :style="{ display: isCollapse ? 'none' : '' }"
                  ></span>
                </template>
                <el-menu-item-group
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                  align="center"
                >
                  <el-menu-item :index="item1.meta.name" @click="$router.push(item1.path)">
                    <i :class="item1.meta.icon"></i>
                    <span slot="title" v-text="item1.meta.name"></span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </div>
          </div>
        </el-menu>
      </el-aside>
      <el-main>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            v-for="(item, index) in levelList"
            :key="index"
            :to="{ path: item.path }"
            >{{ item.meta.name }}</el-breadcrumb-item
          >
        </el-breadcrumb>
        <router-view style="margin-top: 10px" />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { routes } from "@/router";
import store from "@/store";
export default {
  data() {
    return {
      projectRoutes: routes,
      isCollapse: false,
      levelList: [],
    };
  },
  methods: {},
  computed: {
    // 获取vue-router 并且去除hidden
    getRouter() {
      let data = [];
      this.projectRoutes.forEach((item) => {
        if ("hidden" in item) {
        } else {
          data.push(item);
        }
      });
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < data[i].children.length; j++) {
          if ("hidden" in data[i].children[j]) {
            data[i].children.splice(j, 1);
            j -= 1;
          }
        }
      }
      return data;
    },
    // 监听store数据
    handelCollapse() {
      return store.getters.isCollapse;
    },
    getroute() {
      this.levelList = this.$route.matched;
      return this.$route.matched;
    },
  },
  watch: {
    handelCollapse(val) {
      this.isCollapse = val;
    },
    getroute(val) {
      this.levelList = val;
    },
  },
  mounted() {
    this.isCollapse = store.getters.isCollapse;
  },
};
</script>

<style lang="scss">
#SilderBar {
  .el-menu {
    border-right: solid 0px #e6e6e6 !important;
  }
  .el-breadcrumb__item {
    font-size: 14px !important;
    &:last-child {
      line-height: 15px;
    }
  }
  .el-aside {
    height: calc(100vh - 76px) !important;
    background-color: rgb(84, 92, 100);
  }
}
</style>
<style lang="scss" scoped>
#SilderBar {
  height: calc(100vh - 76px);
  border-top: 1px solid #ccc;
}
</style>