1. activeIndex 为默认高亮值,根据改变activeIndex的值来改变高亮的值
  当页面改变的时候获取当前的路由地址,截取第一个 / 后面的值,就是当前的高亮值了
  为什么要截取呢?
  因为点到子集页面的时候,刷新页面找不到路由,所以在设置路由的时候就要注意了,是两层了(例如:/list/details)

<template>
<el-menu :default-active="activeIndex" class="el-menu-demo headnav" mode="horizontal" router>
<el-menu-item v-for="(item,index) in nav" :index="item.path">{{item.title}}</el-menu-item>
</el-menu>
</template>
<script>
export default{
name:'Head',
data(){
return{
activeIndex:'',
nav:[
{title:'进度管理',path:'/projectlist'},
{title:'采集监控',path:'/controlList'},
{title:'任务管理',path:'/tasklist'},
]
}
},
mounted(){
this.activeIndex = "/"+this.$route.path.split("/")[1];
}
}
</script>

vue Element UI 导航高亮的更多相关文章

  1. vue element ui 导航刷新 is-active

    <el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...

  2. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  3. Vue + Element UI 实现权限管理系统

    Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html

  4. vue + element ui 实现实现动态渲染表格

    前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...

  5. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  6. vue+element ui 的上传文件使用组件

    前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...

  7. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  8. vue+element ui 的tab 动态增减,切换时提示用户是否切换

    前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui  有一个 bug,这里记录一下如何实现.转载 ...

  9. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

随机推荐

  1. ISP模块之RAW DATA去噪(一)

    ISP(Image Signal Processor),图像信号处理器,主要用来对前端图像传感器输出信号处理的单元,主要用于手机,监控摄像头等设备上. RAW DATA,可以理解为:RAW图像就是CM ...

  2. scp拷贝本地文件到服务器

    拷贝远程服务器的文件到本地:scp -r -P  端口号   用户名@IP地址:/usr/local/tomcat_airc/webapps/        /tmp/kyj/ 拷贝本地文件到远程服务 ...

  3. 转 : SQL Server数据库优化经验总结

    优化数据库的注意事项: 1.关键字段建立索引. 2.使用存储过程,它使SQL变得更加灵活和高效. 3.备份数据库和清除垃圾数据. 4.SQL语句语法的优化.(可以用Sybase的SQL Expert, ...

  4. 3. Spring Boot热部署【从零开始学Spring Boot】

    转载:http://blog.csdn.net/linxingliang/article/details/51584549 在编写代码的时候,你会发现我们只是简单把打印信息改变了下,就需要重新部署,如 ...

  5. Linux下xargs命令详解及xargs与管道的区别

    在工作中经常会接触到xargs命令,特别是在别人写的脚本里面也经常会遇到,但是却很容易与管道搞混淆,本篇会详细讲解到底什么是xargs命令,为什么要用xargs命令以及与管道的区别.为什么要用xarg ...

  6. 借助backtrace和demangle实现异常类Exception

    C++的异常类是没有栈痕迹的,如果需要获取栈痕迹,需要使用以下函数: #include <execinfo.h> int backtrace(void **buffer, int size ...

  7. 深入解析alloc/retain/release/dealloc实现

    首先通过GNUstep上得源码来叙述各个函数的实现(GNUstep是Cocoa框架的互换框架,二者的行为和实现方式很相似) GNUstep源码中NSObject类的alloc方法: id = obj ...

  8. Linux shell快捷键

    Ctrl + a 可以快速切换到命令行开始处Ctrl + e 切换到命令行末尾Ctrl + r 在历史命令中查找 ctrl + u      删除光标前面所有字符相当于VIM里d shift+^ ct ...

  9. Oracle SOA套件12c

    产品概览 随着基于云的应用越来越多的被企业所採用,以及移动技术与企业应用的集成的需求的增多,企业级应用集成的复杂度也前所未有的提升. Oracle SOA套件12c,业内最完整的统一应用集成解决方式的 ...

  10. vim 标签页管理

    一.打开关闭标签页 1. :tabnew  新建标签页 2. :tabc     关闭当前标签页 3. :tabo     关闭其他标签页保留当前标签页 4. :tabe file  在新标签页中打开 ...