vue Element UI 导航高亮
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 导航高亮的更多相关文章
- vue element ui 导航刷新 is-active
<el-menu :default-active="$route.path" router mode="horizontal"> <el-me ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue + Element UI 实现权限管理系统
Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境 https://www.cnblogs.com/xifengxiaoma/p/9533018.html
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- vue+element ui 的上传文件使用组件
前言:工作中用到 vue+element ui 的前端框架,使用到上传文件,则想着封装为组件,达到复用,可扩展.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9 ...
- vue+element ui 的表格列使用组件
前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...
- vue+element ui 的tab 动态增减,切换时提示用户是否切换
前言:工作中用到 vue+element ui 的前端框架,动态添加 Tab,删除 Tab,切换 Tab 时提示用户是否切换等,发现 element ui 有一个 bug,这里记录一下如何实现.转载 ...
- 基于 vue+element ui 的cdn网站(多页面,都是各种demo)
前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...
随机推荐
- django book用户认证学习
用户与Authentication 通过session,我们可以在多次浏览器请求中保持数据, 接下来的部分就是用session来处理用户登录了. 当然,不能仅凭用户的一面之词,我们就相信,所以我们需要 ...
- jmap -histo pid 输出的[C [B [I [S methodKlass的含义
转载于https://yq.aliyun.com/articles/43542 摘要: jmap -histo pid 输出结果样式 num #instances #byte ...
- python对文件写操作报错UnicodeEncodeError
2017-04-25 python连mongodb数据库并将提取部分数据写入本地文件时,出现UnicodeEncodeError. 解决方法:指定文件字符集为utf-8,在文件头部加入以下代码 imp ...
- zabbix proxy分布式监控部署
一.proxy分布式监控介绍 来源于zabbix官网: https://www.zabbix.com/documentation/3.4/zh/manual/distributed_monitorin ...
- zabbix通过snmp监控linux主机
1.安装net-snmp [root@db01 ~]# yum install -y net-snmp 2.修改配置文件 [root@db01 ~]# vim /etc/snmp/snmpd.conf ...
- 2017.6.30 IDEA插件--gsonfomat的安装与使用
参考来自:http://www.cnblogs.com/1024zy/p/6370305.html 1.安装 2.使用 (1)新建一个空类 (2)在空类里按快捷键:alt+s,打开gsonformat ...
- USE [EPPM] [dbo].[REFRDEL_CLEANUP]
USE [EPPM] GO /****** Object: StoredProcedure [dbo].[REFRDEL_CLEANUP] Script Date: 2016/4/2 16:32:29 ...
- Maven够用就好
学习maven.仅仅要知道pom.dependency.coordination就能够了,剩下的就是学习一个一个的plugin的Goal 配置maven 下载 http://maven.apac ...
- Node.js 把图片流送到客户端
效果: 代码: var http=require('http'); var fs=require('fs'); var path=require('path'); var mime=require(' ...
- Android学习(二十三)SubMenu 子菜单
一.SubMenu子菜单 和功能菜单相似,但是可以添加子菜单. 二.实现步骤: 1.通过onCreateOptionsMenu方法创建子菜单,可以通过代码动态创建,也可以通过xml进行创建. 2.通过 ...