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. javascript正则表达式小技巧

    一.中括号[]里面的特殊字符是不用转义的,例如[/].[.].[*].[?].[+]都是可以直接匹配对应的字符\ . *?+.下面是测试结果: 所以,/[\d.]/这个正则表达式实际上是匹配数字字符或 ...

  2. RedHat虚拟机相关操作

    在VM虚拟机中安装完Redhat系统之后 如果需要用secureCRT连接linux系统的话 操作步骤如下: 1.进入linux系统,在终端输入ifconfig(注意,不是windows的ipconf ...

  3. 资深程序员教你如何实现API自动化测试平台!附项目源码!

    原文链接: 1.平时测试接口,总是现写代码,对测试用例的管理,以及测试报告的管理持久化做的不够, 2.工作中移动端开发和后端开发总是不能并行进行,需要一个mock的依赖来让他们并行开发. 3.同时让自 ...

  4. 在MyEclipse上安装GIT插件EGit

    MyEclipse2016 CI 下载地址:http://pan.baidu.com/s/1gfBw9Ab 1.“Help”->"Install from Site" 2.在 ...

  5. git学习——记录每次更新到仓库

    记录每次更新到仓库 工作目录下面的所有文件都不外乎这两种状态:已跟踪或未跟踪.已跟踪的文件是指本来就被纳入版本控制管理的文件,在上次快照中有它们的记录,工作一段时间后,它们的状态可能是未更新,已修改或 ...

  6. Android Activity之间经典切换动画

    package com.iteye.androidtoast; import java.util.ArrayList; import java.util.List; import android.ap ...

  7. 重入锁的好搭档:Condition条件(读书笔记)

      Condition结构提供了基本方法如下: void await() throws InterruptedException; void awaitUninterruptibly(); long ...

  8. Vue-router(vue2.0)用法示例

    一.新建3个组件 1./src/components/post.vue <template> <div> hello world! this is POST! </div ...

  9. [转]Tomcat处理一个HTTP请求的过程

    1.Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servlet container. ...

  10. cisco 为每个单独的人员设置不同的用户名和密码

    cisco 为每个单独的人员设置不同的用户名和密码 2010-12-15 17:00:16 分类: 系统运维 Router1#configure terminalEnter configuration ...