vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置

导航栏页面，关键代码：

1.要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路由跳转。
2.导航当前项，在el-menu标签中绑定  :default-active="$route.path",注意是绑定属性，不要忘了加“:”,当$route.path等于el-menu-item标签中的index属性值时则该item为当前项。
 

 vue-router的具体使用方法可以参考：

vue-router路由的基本用法和Vue-router学习笔记_勤动手多动脑少说多做厚积薄发-CSDN博客vue-router具体用法和Vue-router学习笔记https://blog.csdn.net/qq_22182989/article/details/122449291

代码：

<div class="nav-list-box">
      <h1 @click="goHome">xxx后台管理系统</h1>
      <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
        <el-menu-item index="/daohang1">
          <i class="el-icon-s-management"></i>
          <span slot="title">导航1</span>
        </el-menu-item>
        <el-menu-item index="/daohang2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航2</span>
        </el-menu-item>
        <el-menu-item index="/daohang3">
          <i class="el-icon-document"></i>
          <span slot="title">导航3</span>
        </el-menu-item>
        <el-menu-item index="/daohang4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航4</span>
        </el-menu-item>
      </el-menu>
    </div>

参考：

vue2+el-menu实现路由跳转及当前项的设置_lyf的博客-CSDN博客_el-menu路由用户信息 账号信息 修改密码 公司信息 用户管理 添加/编辑用户 1.要实现路由跳转，先要在el-menu标签上添加router属性，然后只要在每个el-menu-item标签内的index属性设置一下url即可实现点击el-menu-item实现路https://blog.csdn.net/qq_37281252/article/details/78460159