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. 使用Spring的AbstractRoutingDataSource实现多数据源切换

    https://www.cnblogs.com/softidea/p/7127874.html?utm_source=itdadao&utm_medium=referral https://b ...

  2. Java高级特性—并发包

    1). java并发包介绍 JDK5.0 以后的版本都引入了高级并发特性,大多数的特性在java.util.concurrent 包中,是专门用于多线程发编程的, 主要包含原子量.并发集合.同步器.可 ...

  3. 常见的Linux系统监控命令

      1.free 显示当前系统未使用的和已使用的内存数目,还可以显示被内核使用的内存缓冲区 -b:以Byte为单位显示内存使用情况: -k:以KB为单位显示内存使用情况: -m:以MB为单位显示内存使 ...

  4. javascript另类写法

    今天来介绍一下javascript不一样的写法,很简单哦. 1.当条件成立时执行a方法,当条件失败是执行b方法 通常我们会这样写: var result; if(isOk){ result=funA( ...

  5. 使用 react-native-tab-navigator 创建 TabBar 组件

    1.首先安装好ReactNative的运行环境,安装组件依赖库 使用npm install react-native-tab-navigator --save安装所依赖的第三方库 2.导入 impor ...

  6. JavaScript字符编解码

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  7. swift 中的问号跟感叹号

    ?: 变量在使用过程中可能存在空值,则需要用?标记,否则赋空值会报错 ? 1 2 var mustNoNilValue: String = "Swift" var canNilVa ...

  8. 我们常用的在a标签中有点击事件

    我们常用的在a标签中有点击事件:1. a href="javascript:js_method();" 这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题 ...

  9. IAR模板--怎样在IARproject中创建和使用模板

    怎样在IARproject中创建和使用模板 1.编辑和使用模板的方式: 路径为:Edit -> Code Templates -> Edit Templates  例如以下图: water ...

  10. oracle中避免sort操作

    1.升序排列 create index ix_table1 on table1 (column1,column2); select column1,column2 from table1 order ...