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 ...
随机推荐
- 摄像头bug查找工作总结
近期花了很长时间在libcamera中查找和解决一个bug.下面将这段时间中的工作过程,以及对camera的认识总结如下: 首先是问题的发生,在UM2801中,摄像头的代码已经基本实现,并且相应功能也 ...
- C# this.Invoke()的作用与用法
Invoke()的作用是:在应用程序的主线程上执行指定的委托.一般应用:在辅助线程中修改UI线程( 主线程 )中对象的属性时,调用this.Invoke(); 在多线程编程中,我们经常要在工作线程 ...
- 最简单的基于FFmpeg的移动端样例:IOS 视频解码器
===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:A ...
- 自己定义控件-LinearListView
一.描写叙述 用LinearLayout 实现的一个ListView ,重写了ListView中的经常使用函数,所以使用起来和ListView 没有区别. 比方:setAdapter.addHeade ...
- Solidworks如何为装配体绘制剖面视图
1 如图所示的工程图来自装配体 2 点击剖面视图,随后绘制一条线(我从正中劈开),弹出对话框,勾选自动打剖面线,确定 3 剖面视图绘制完毕 三个剖视图如下 关于半剖视图,可以这样做.先 ...
- 小计一次linux下渗透方法
本文转自91ri 踩点 目标域名是XX.com 我们的目标是大站,所以主站一般都挺安全的,所以直接寻找二级目录,运气好时能找到一些开源的cms,运气更好点找到个dede啥的,那就…. 我们直接枚举他域 ...
- Hdu 2243 考研路茫茫——单词情结 (AC自己主动机+矩阵)
哎哟喂.中文题. . .不说题意了. 首先做过POJ 2778能够知道AC自己主动机是能够求出长度为L的串中不含病毒串的数量的. POJ 2778的大概思路就是先用全部给的病毒串建一个AC自己主动机. ...
- vue-router $route
1.$route 除了 $route.params 外,$route 对象还提供了其它有用的信息,例如,$route.query (如果 URL 中有查询参数).$route.hash 等等
- Android 虚线切割线
drawable下新建一个虚线的xml.dash_line.xml <? xml version="1.0" encoding="utf-8"?> ...
- 【LeetCode】LeetCode——第14题:Longest Common Prefix
14. Longest Common Prefix My Submissions Question Editorial Solution Total Accepted: 97052 Total Sub ...