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. Tomcat:Java Web服务器配置详解

    一.Tomcat概述 1.tomcat简介 tomcat是基于JDK的web服务器,其能运行Servlet和JSP规范总.Tomcat 5支持最新的Servlet 2.4 和JSP 2.0规范.实际上 ...

  2. 关于C++中_finite()函数的说明 [转]

    The function int _finite(double x) returns 1 (true) if x is an ordinary number and 0 (false) if x is ...

  3. yolo.v2 darknet19结构

    Darknet19( (conv1s): Sequential( (0): Sequential( (0): Conv2d_BatchNorm( (conv): Conv2d(3, 32, kerne ...

  4. java-selenium(二)富文本编辑框的处理

    首先先看一下什么是富文本编辑框 HTML源码 思路:首先先进入到iframe中,再用js写,最后切出iframe 如果想要换行可以在换行的地方加上<br> 如果添加的文本中包含单引号.双引 ...

  5. 精通Hibernate——域对象之间的关系

    在域模型中.类之间存在四种关系 1.关联(Association) 类之间的引用关系,能够有一对一.一对多和多对多,比如customer与order之间就是一对多 public class Order ...

  6. 倍福TwinCAT(贝福Beckhoff)基础教程1.2 TwinCAT安装配置

    由于TC2和TC3都有可能用到,个人推荐都安装,但是注意必须是先安装的TwinCAT2,然后安装TwinCAT3,如果反了可能两个都没法用(打开TcSwitchRuntime提示Both TwinCA ...

  7. Visual Prolog 的 Web 专家系统 (10)

    GENI的核心 -- 推理机(4)求证过程分析 1.GENI知识库结构 专家系统推理机的设计执行,与其知识库结构紧密相关. GENI知识库结构是一棵逻辑推理树. 根节点是animal,即求证的目标. ...

  8. LeetCode-Minimum Window Substring -- 窗口问题

    题目描述 Given a string S and a string T, find the minimum window in S which will contain all the charac ...

  9. (八)Thymeleaf的 th:* 属性之—— 模板布局& th:with& 属性优先级

    3.7 模板布局 模板名称:layout.html 3.7.1 th:fragment e.g.模板名为footer.html页面body部分如下: <body> <div th:f ...

  10. python 读写 json文件

    json的优势: 1. 数据体积方面. JSON相对于XML来讲,数据的体积小,传递的速度更快些. 2. 传输速度方面. JSON的速度要远远快于XML 3. 数据格式 数据格式比较简单, 易于读写, ...