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. remmina rdp远程连接windows

    一.remmina rdp远程连接windows sudo apt-get install remmina 二.ubuntu设置桌面快捷方式 ①找到Remmina远程桌面客户端 比如在[搜索您的本地和 ...

  2. java学习笔记——大数据操作类

    java.math包中提供了两个大数字操作类:BigInteger(大整数操作类) BigDecimal(大小数操作类). 大整数操作类:BigInteger BigInteger类构造方法:publ ...

  3. ContentProvider之通过ContentResolver获取图像、视频、音频举例

    MediaStore中定义了一系列的数据表格,通过ContentResolver提供的查询接口,我们能够得到各种须要的媒体信息.通过下面两个URI能够扫描设备外部和内部的媒体文件.Android系统提 ...

  4. 使用SQLite存储数据

    一.SQLiteAndroid 为了让我们能够更加方便地管理数据库, 专门提供了一个SQLiteOpenHelper 帮助类,借助这个类就可以非常简单地对数据库进行创建和升级. 1.SQLiteOpe ...

  5. ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...

  6. matplotlib表面三维图

    1.basic numpy.meshgrid 由一维数组到二维数组,用于生成网格数据 matplotlib python绘图库 2.code In [88]: from mpl_toolkits.mp ...

  7. java 安装后 不能 java javac 说找不到命令 -bash: javac: command not found

    java 安装后 不能 java javac  说找不到命令 -bash: javac: command not found 不是环境变量的问题, 直接cd到java的目录 也不能执行命令 后来发现是 ...

  8. Hibernate二次学习一----------Hibernate简单搭建

    因为博客园自带的markdown不太好用,因此所有markdown笔记都使用cmd_markdown发布 Hibernate二次学习一----------Hibernate简单搭建: https:// ...

  9. maven初始搭建一个基础项目(spring mvc+spring+jdbc mysql+jstl)

    技术选型: 一.项目搭建: 1)创建maven项目 (我博客里面有介绍) 选择aptach的maven-archetype-webapp 填入groupIDhe artifactId等 确认项目名称 ...

  10. quartz项目中的运用

    下面是之前项目中quartz的运用,我将它梳理出来. 测试类: public class OrdExpireTaskMain { public static void main(String[] ar ...