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 ...
随机推荐
- 用new和delete运算符进行动态分配和撤销存储空间
測试描写叙述:暂时开辟一个存储空间以存放一个结构体数据 #include <iostream> #include <string> using namespace std; s ...
- [转] docker rmi命令-删除image
原文:http://www.simapple.com/341.html ---------------------------------------------------------------- ...
- Microsoft .Net Remoting
什么是Remoting,简而言之,我们可以将其看作是一种分布式处理方式.从微软的产品角度来看,可以说Remoting就是DCOM的一种升级,它改善了很多功能,并极好的融合到.Net平台下.Micros ...
- fiddler实现后端接口 mock(不需要修改开发代码)
转载:http://blog.csdn.net/huazhongkejidaxuezpp/article/details/50435552 步骤 1. 获取 接口 定义(接口返回的json串) ...
- javascript - 封装jsonp
jsonp牵扯到同源策略.跨域等问题,这里不细说了. 实现就是创建动态的script标签来请求后台地址: 示例: jsonp('xxx.php', { uid: 1 }, function (res) ...
- Vector的一种实现(一)
注意几点: 分配内存不要使用new和delete,因为new的同时就把对象构造了,而我们需要的是原始内存. 所以应该使用标准库提供的allocator类来实现内存的控制.当然也可以重载operator ...
- Windows键
Windows键+D: 最小化或恢复windows窗口 Windows键+U: 打开“辅助工具管理器” Windows键+CTRL+M 重新将恢复上一项操作前窗口的大小和位置 Windows ...
- centos安装pip Xvfb Selenium
pip安装命令: python -V wget https://bootstrap.pypa.io/get-pip.py python get-pip.py Xvfb安装命令: yum install ...
- curl命令测试https
curl -vosa --resolve pic.test.net::222.241.7.179 https://pic.test.net/UploadFiles/201312031744347965 ...
- 关于Linux网络配置
Linux网络配置 一:什么是网络接口卡以及如何查看网络接口的网络信息:在Linux系统中,主机的网络接口卡通常称为“网络接口”,我们可以使用ifconfig命令来查看网络 接口的信息(普通用户使用/ ...