NavMenu 导航菜单

 <el-menu
            :default-active="activeRoute" //默认激活的路由
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#0f1b33" //背景颜色
            text-color="#cfdae6"  //文本颜色
            active-text-color="#fff"  //激活状态文本颜色
            :unique-opened="true"  //保持一个子菜单的展开
            style="text-align: left"
            router  //开启路由
          >
            <el-menu-item index="/home">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>题库中心</span>
              </template>
              <el-menu-item index="/questionBank">我的题库</el-menu-item>
              <el-menu-item index="2-2">智能出题</el-menu-item>
              <el-menu-item index="2-3">智能解析</el-menu-item>
              <el-menu-item index="2-4">全部错误</el-menu-item>
              <el-menu-item index="2-5">全部收藏题</el-menu-item>
              <el-menu-item index="2-6">练习记录</el-menu-item>
              <el-menu-item index="2-7">题库分类</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>发起考试</span>
              </template>
              <el-menu-item index="3-1">考试历史</el-menu-item>
              <el-menu-item index="3-2">线下组卷</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>我的账户</span>
              </template>
              <el-menu-item index="4-1">账户信息</el-menu-item>
              <el-menu-item index="4-2">我的订单</el-menu-item>
              <el-menu-item index="4-3">文档下载</el-menu-item>
              <el-menu-item index="4-4">我的发票</el-menu-item>
              <el-menu-item index="4-5">题库中心</el-menu-item>
              <el-menu-item index="4-6">消息中心</el-menu-item>
              <el-menu-item index="4-7">回收站</el-menu-item>
            </el-submenu>
            <el-menu-item index="5">
              <i class="el-icon-menu"></i>
              <span slot="title">试题报错</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-menu"></i>
              <span slot="title">App下载</span>
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-menu"></i>
              <span slot="title">帮助教程</span>
            </el-menu-item>
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>工具服务</span>
              </template>
              <el-menu-item index="8-1">小程序设置</el-menu-item>
              <el-menu-item index="8-2">公众号链接工具</el-menu-item>
            </el-submenu>
            <el-menu-item index="9">
              <i class="el-icon-menu"></i>
              <span slot="title">校园版</span>
            </el-menu-item>
          </el-menu>

激活item的背景颜色

.el-menu-item.is-active{
  background-color: rgb(26, 140, 255) !important;
}

动态修改激活状态的路由

  computed:{
    activeRoute(){
      console.log(this.$route.path);
      return this.$route.path
    }
  }

修改el-submenu的样式

.el-submenu /deep/ .el-submenu__title,.el-menu-item{
    height: 50px;
    line-height: 50px ;
  }