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

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

---

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

<template>
  <div class="nav-menu">
	 <!--:route="{path: '/area'}"-->
	<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》部分！

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

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

---

---

附件1：效果图预览：

---

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

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

---

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