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 ...
随机推荐
- 可以使用foreach遍历循环的条件
大话C#中能使用foreach的集合的实现 转自:http://www.cnblogs.com/tangzhengyue/p/3339936.html 大家都知道foreach的语法: forea ...
- 使用springMVC上传文件
control层实现功能: @RequestMapping(value="upload2") public String upLoad2(HttpServletRequest re ...
- Solr 6.6.0 ERROR: Port 8983 is already being used by another process.
在目录D:\work\Solr\solr-6.6.0\bin下打开命令框: 输入:solr -e dih报错:ERROR: Port 8983 is already being used by ano ...
- Linux中MySQL数据库max_allowed_packet的调整
在MySQL数据库里某表有一个blob字段,当上传文件超过1M的时候出现下面的错误: PreparedStatementCallback; SQL [insert into uos.docfile(r ...
- Win7如何配置java环境变量,运行环境
直接运行eclipse,弹出错误提示. 1 确保你安装了JDK,安装之后文件夹示例如下(jdk1.x.x取决于你安装的JDK版本) 2 系统,高级系统设置,高级,环境变量新建一个JAVA_HO ...
- 【Excle数据透视表】如何将价格小于5000的显示为红色“不达标”
例如下图:需要将价格小于5000的设置为低价格 步骤 单击"价格"列任意单元格→右键→数字格式→自定义→在类型下的文本框写入:[>=5000]G/通用格式;[红色][< ...
- spring aop中的propagation(传播属性)的7种配置的意思
1.前言. 在声明式的事务处理中,要配置一个切面,即一组方法,如 <tx:advice id="txAdvice" transaction-manager="t ...
- 关于汉诺塔,C++代码,代码效果演算
1.故事介绍 汉诺塔:汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具.大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上依照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘 ...
- presentModalViewController方法,present一个透明的viewController,带动画效果
//假设需要被present的控制器实例为controller,controller的背景色设置为clearColor UIViewController * rootcontroller = self ...
- 02-2设置第一启动项--进入Bios界面设置U盘为第一启动项
进入Bios界面设置U盘为第一启动项: 开机,当电脑处于启动状态,屏幕显示电脑LOGO时,按下F2键.(根据电脑的不同,进入BIOS的功能键也不同,可根据自己电脑的型号百度搜索相关功能键) 按电脑方向 ...