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. redis打开非英文存储显示问题

    使用jedis 在redis中如果存储非英文的值,入 中文,印地语,马拉蒂语,泰米尔语等.在执行get 或者 hget的时候查询出来的数据会以16进制显示.如何显示原有的值 在redis启动的时候加上 ...

  2. 利用excel去除txt文本中重复项

    2017-04-10 1.要去重的文件,点击右键,选择程序. 2.选择excel表格或者wps表格. 3.excel表格去重:选中单元格——数据——筛选——高级筛选——选择不重复记录——确定 wps表 ...

  3. [Unit Testing] Mock a Node module's dependencies using Proxyquire

    Sometimes when writing a unit test, you know that the module you're testing imports a module that yo ...

  4. JAVA反射机制--怎么不受泛型束缚给数组赋值

    在Java中,声明数组的时候我们经常会写泛型限制用户输入或者获取的数据.如:ArrayList<String> list = new ArrayList<>(); String ...

  5. 在项目中引用android.support.v7

    在Android开发中,新建的项目可能因为缺少对sopport工程的引用而报错,可以这样解决. 1.项目右键 --> import --> Android --> Existing ...

  6. 关于ng-router嵌套使用和总结

    那是某个下午的review代码的过程.js中有一段html,像是这样. var html = '<div>...此处还有很多html代码....</div>' 我的同事想我提出 ...

  7. Highcharts使用二维数组生成图表

    Highcharts使用二维数组生成图表 二维数组是更为灵活的一种数据存储方式.在Highcharts中.能够使用配置项column和rows二维数组.对于使用columns构建的二维数组,Highc ...

  8. SoC嵌入式软件架构设计之三:代码分块(Bank)设计原则

    上一节讲述了在没有MMU的CPU(如80251.MIPS M控制器系列.ARM cortex m系列)上实现虚拟内存管理的集成硬件设计方法.新设计的内存管理管理单元要实现虚拟内存管理还须要操作系统.代 ...

  9. 关于其它模块的设计,有非常多须要自己去构建和完毕,在这里就简单地举几个样例来看看其它模块的设计。我们要做的就是有更改password模块,客户选择模块和关于本软件模块。更改password模块用来更改管理员的password,客户选择对话框模块用来选择已加入的客户,关于本软件模块用来说明客户管理系统的一些必要信息和制作人的信息。

            五,其它模块设计         关于其它模块的设计,有非常多须要自己去构建和完毕,在这里就简单地举几个样例来看看其它模块的设计. 我们要做的就是有更改password模块.客户选择模 ...

  10. 如何在 Linux 中找到你的 公网IP 地址

    每个网站都有一个独有的公开 IP 地址,可供任何人从任何地方访问. 互联网协议Internet Protocol(IP)不需要介绍 —— 我们每天都在使用它.即使你不直接使用它,当你在浏览器上输入 w ...