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. Python-使用Magellan进行数据匹配总结

    参考:http://www.biggorilla.org/zh-hans/walkt/ 使用Magellan进行数据匹配过程如下: 假设有两个数据源为A和B, A共有四列数据:(A_Column1,A ...

  2. memcache运行机制(转)

    网上其实有很多文章说明了memcached是如何运作的,特别是底层的内存分配是如何运作的.我参考过很多资料,比较有启发意义的有几个: 首先是官方的英文资料,虽然文章太多.很难看懂,我个人觉得说得也不是 ...

  3. [转载]JAVA调用Shell脚本

    FROM:http://blog.csdn.net/jj12345jj198999/article/details/11891701 在实际项目中,JAVA有时候需要调用C写出来的东西,除了JNI以外 ...

  4. hdu 4512 吉哥系列故事——完美队形I(最长公共上升自序加强版)

    首先要去学习最长公共上升子序列LCIS.然后是对n*n效率的算法进行优化,这里要注意的是能够求出来的序列中间能够有一个最高的.刚開始将输入的数组进行逆置,写下来发现这可能存在问题. 只是详细是什么也没 ...

  5. 编译和安装在Windows上橡胶树 (Compiling and Installing Yate on Windows)

    编译和安装在Windows上橡胶树     有两种方法来安装橡胶树下窗口: 下载并安装橡胶树 下载后页面设置. 另一个选择是下载橡胶树从SVN并编译它. 内容 ( 隐藏] 1 安装使用设置橡胶树 2  ...

  6. hadoop2.4 支持snappy

    我们hadoop2,4集群默认不支持snappy压缩,可是近期有业务方说他们的部分数据是snappy压缩的(这部分数据由另外一个集群提供给他们时就是snappy压缩格式的)想迁移到到我们集群上面来进行 ...

  7. 实战Jquery(一)--username校验

    歇息了好几天,最终又開始学习了.jQuery? JQuery is designed to change the way that you write JavaScript. The focus of ...

  8. JDK与adb/android环境变量配置完整教程

    在这篇文章中.主要解决一个在Java或者Android开发中第一步须要解决的问题,那就是环境变量的配置.因为这部分在网上有非常多教程.參差不齐.我这里主要是对JDK与adb/android两者的环境变 ...

  9. EFCore & Mysql migration on Production

    最好的办法是通过脚本进行生产环境数据库更新. 如: dotnet ef migration script -i -o "script.sql". 这样将会产生一个你不用在意线上版本 ...

  10. listItem选中状态高亮

    两种方法1.在adapter中添加方法changeSelected()int mSelect = 0; //mSelect为选中项public void changeSelected(int posi ...