Vue+elementui project el-menu navigation bar realizes routing jump and setting of current item

Navigation bar page, key code:

1. To achieve routing jump, first add the router attribute to the el-menu tag, and then just set the url in the index attribute of each el-menu-item tag to realize the routing jump by clicking el-menu-item change.
2. To navigate the current item, bind in the el-menu tag: default-active="$route.path", pay attention to the binding attribute, don't forget to add ":", when $route.path is equal to el-menu- The item is the current item when the index attribute value in the item tag.
 

 The specific usage of vue-router can refer to:

Basic usage of vue-router routing and Vue-router study notes_Hands-on, more brains, less talk, more accumulation-CSDN blog vue-router specific usage and Vue-router study notes https://blog.csdn.net/qq_22182989/article /details/122449291

code:

<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>

reference:

vue2+el-menu realizes routing jump and setting of current item Add the router attribute to the el-menu tag, and then just set the url in the index attribute of each el-menu-item tag to click on the el-menu-item implementation path https://blog.csdn.net/qq_37281252 /article/details/78460159