Element-ui导航组件NavMenu导航高亮设置

Element-ui导航组件： NavMenu 导航HighLight 高亮设置

---

1. 文件navMenu.vue，部分代码参考：

<template>
  <div class="nav-menu">
     
    <el-menu        
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b" router>
      <el-menu-item index="/"><img src="../../../static/images/logo.png"/></el-menu-item>
      <el-menu-item index="/index">首页2</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="/job">职位申请</el-menu-item>
        <el-menu-item index="/area">区域选择</el-menu-item>
        <el-submenu index="5">
            <template slot="title">表格</template>
            <el-menu-item index="/table/base">基础数据填充</el-menu-item>
            <el-menu-item index="/table/horse">带斑马纹表格</el-menu-item>
            <el-menu-item index="/table/border">带边框表格</el-menu-item>
            <el-menu-item index="/table/rowclassname">带状态表格</el-menu-item>
            <el-menu-item index="/table/fixedheight">固定列、表头（文字操作）</el-menu-item>
            <el-menu-item index="/table/maxheight">流体高度（文字操作）</el-menu-item>
            <el-menu-item index="/table/moreth">多级表头（表头嵌套）</el-menu-item>
            <el-menu-item index="/table/choose">单选、多选</el-menu-item>
            <el-menu-item index="/table/sort">排序</el-menu-item>
            <el-menu-item index="/table/tagselect">筛选（div模拟selelct）</el-menu-item>
            <el-menu-item index="/table/columntemplate">自定义列模板（按钮操作）</el-menu-item>
            <el-menu-item index="/table/opentr">展开行</el-menu-item>
        </el-submenu>
        <el-submenu index="6">
            <template slot="title">Upload上传</template>
            <el-menu-item index="/upload/click">点击上传</el-menu-item>
            <el-menu-item index="/upload/userheadpic">用户头像上传</el-menu-item>
            <el-menu-item index="/upload/photowall">照片墙</el-menu-item>
            <el-menu-item index="/upload/thumblist">图片列表缩略图</el-menu-item>
            <el-menu-item index="/upload/docslist">上传文件列表控制</el-menu-item>
            <el-menu-item index="/upload/bydrag">拖拽上传</el-menu-item>
            <el-menu-item index="/upload/byhand">手动上传</el-menu-item>
        </el-submenu>
        <el-menu-item index="2-1">移动端</el-menu-item>
        <el-menu-item index="2-2">微信小程序</el-menu-item>
        <el-submenu index="2-3">
          <template slot="title">PC 端</template>
          <el-menu-item index="2-3-1">案例1</el-menu-item>
          <el-menu-item index="2-3-2">案例2</el-menu-item>
          <el-menu-item index="2-3-3">案例3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="javascript:;" target="_blank" title="target无效">订单管理</a></el-menu-item>
      <el-menu-item index="/login">登录</el-menu-item>
      <el-menu-item index="/register">注册</el-menu-item>
    </el-menu>

  </div>
</template>

在上述的.vue文件中，并不需要设置《script》和《style》部分！

唯一需要注意的:( 开始标签中设置的两处代码，如下)

1. :default-active="$route.path"
2. router

---

---

附件1：效果图预览：

---

附件2：文件路径和路由设置，代码截图如下：

设置了上述的两处代码，接着对配置一下path路径(相关路由配置截图如下)，就可以实现页面与navMenu导航组件的对应栏目高亮显示了。

---

以上就是关于“ Element-ui导航组件NavMenu导航高亮设置 ”的全部内容。