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 ...
随机推荐
- thrift.transport.TTransport.TTransportException: Could not start SASL: Error in sasl_client_start (-4) SASL(-4): no mechanism available: No worthy mechs found
thrift.transport.TTransport.TTransportException: Could not start SASL: Error in sasl_client_start (- ...
- 用MyEclipse2016 CI版创建一个SpringBoot程序
之前先要在Eclipse里安装STS,步骤如下: 1.点击菜单Help->Install from Catalog 2.在弹出的对话框中点击Popular选项卡,在STS旁边点Install按钮 ...
- 标准库Allocator的使用(一)
上一篇我们提到了new运算符以及它的工作步骤,其实无非是把两项工作独立出来: 1.申请原始内存 2.执行构造函数 delete也涉及了两个工作: 1.执行析构函数 2.释放原始内存 其实标准库提供了另 ...
- Android SDK安装时出错“android Failed to rename directory”的解决方法
Android SDK安装时出错"android Failed to rename directory"的解决的方法 安装Android SDK时遇到Failed to r ...
- 跟踪运行时错误 vue
如果在组件渲染时出现运行错误,错误将会被传递至全局 Vue.config.errorHandler 配置函数 (如果已设置).利用这个钩子函数来配合错误跟踪服务是个不错的主意.比如 Sentry,它为 ...
- Nginx实现虚拟主机
因为IP地址有限,因此经常存在多个主机域名对应着同一个IP地址的情况,可以通过配置虚拟主机来解决这个问题. 在nginx.conf中,每个server块就是一个虚拟主机,它只会处理与其server_n ...
- myBatis插入oracle获取主键
<insert id="insert" parameterType="com.inspur.biz.entry.SpLackApply"> < ...
- 那些奇妙的"大师"是怎样炼成的(科学、迷信、心理)
近期王林大师从神坛上掉下来直接掉进了监狱,有关他的非常多神话也相同被撕下了. 事实上这类奇妙的大师在地球上非常多,美国的非常多"邪教"头目,国内的邪教头目都属于这一类.国内比較轰动 ...
- Cent OS安装My Sql
因为公司的需要,所以就自己学习了一下在Linux上安装MySQL,但是翻查了好多博客,没有特别清楚,自己写下来好好总结一下 一.系统环境 CentOS-6.3-i386-bin-DVD1 二.下载My ...
- MYSQL数据插入、更新及删除
上文讲到创建数据表,本文介绍create table后的数据插入: 一.通过insert into ...values...插入 insert into tablename (column1,colu ...