element-ui 左侧边栏el-menu组件： 路由跳转 - 案例篇

版权声明：本文为博主原创文章，允许转载，但转载必须注明出处并附带首发链接 https://blog.csdn.net/qq_35393869/article/details/88077912

有顶部导航 、还有侧边栏导航：如何实现路由的设置、跳转、高亮？

---

A. 顶部导航 · Hhtml 代码如下：（含高亮设置）

<el-menu
	  :default-active="$route.path"
	  class="el-menu-demo"
	  mode="horizontal"
	  @select="handleSelect"
	  background-color="#fff"
	  text-color="#545c64"
	  active-text-color="#ffd04b" router>

---

B. 左侧边栏 · html 代码如下：

注意观察<el-menu>标签内的default-active 和 router 设置：

    <el-menu
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect_2"
      router>

      <el-menu-item index="1">
        <i class="el-icon-menu"></i>
        <span slot="title">搜索简历</span>
      </el-menu-item>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title"> 人才库</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">代理招聘</span>
      </el-menu-item>
      <el-menu-item index="/shareResume">
        <i class="el-icon-setting"></i>
        <span slot="title">分享简历</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title">企业账户</span>
      </el-menu-item>
    </el-menu>

---

C.methods

	methods: {
	      handleSelect2(key, keyPath) {
	        console.log(key, keyPath);
	      }
	  }

---

D. 重点提示：

• 必须设置：default-active="$route.path"
• 必须设置：router
• 上面亮相设置完毕，即可设置具体的跳转路由，比如：
  分享简历 <el-menu-item index="/shareResume">

---

以上就是关于“　element-ui 左侧边栏el-menu组件： 路由跳转 - 案例篇　”　的全部内容。