首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色

.el-menu-item.is-active {
background-color: #00b4aa !important;
}

在使用elementUI构建vue项目的时候会遇到页面刷新的时候子路由会保持原来的,页面中的内容也是当前对应路由的内容,但是elementUI的导航栏中的高亮显示的却失去了原来的状态,以下是我解决这个内容的方法,暂时没有发现什么问题,如果大家有什么问题可以提出来

<el-menu
:default-active="activerouter"
:router="true"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#00b4aa"
@select="handleOpen"
active-text-color="#fff"
>

首先在elementUI的导航栏的标签中设置

:default-active="activerouter"
其中activerouter是一个data中的变量,
 mounted() {
//获取地址栏中的路由,设置elementui中的导航栏选中状态
this.activerouter = window.location.pathname;
},

在mounted中添加以上代码,这样在渲染之前先把当前的路由设置给导航栏的默认的路由,则刷新也是显示的当前路由的内容,并且导航栏高亮的也是当前路由的那个选项了

elementUI的导航栏在刷新页面的时候选中状态消失的解决的更多相关文章

  1. Vue ElementUI主页面搭建和导航栏使用,并在刷新页面的时候选中状态消失的问题解决

    <template> <div style="height:100%;width: 100%; padding:0 auto; margin: 0 auto;"& ...

  2. element-ui使用导航栏跳转路由用法

    element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...

  3. PHP 使用数字作为SESSION的Key,一刷新页面session丢失,Session消失,无法存储

    PHP 使用数字作为SESSION的Key,一刷新页面session丢失,Session消失,无法存储 项目中有用到md5截取做session key值的,有些md5截取出来的部分是纯数字的,导致部分 ...

  4. 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法

    问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...

  5. 根据location地址,在导航栏高亮显示当前页面

    获取当前页面的地址栏.与导航栏中所有<a> 标签的href属性 进行比较.如果相等则高亮显示 此<a>标签. 注意点:a 标签的href 属性在浏览器解析时 是绝对路径. a  ...

  6. elementUI的导航栏怎么根据路由默认选中相关项

    1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> ...

  7. elementui更改导航栏样式

    本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写 以下效果: 放上代码 <style> .el-menu-demo{ hei ...

  8. selected 刷新页面后selected选中的值保持不表(thinkphp 从控制器assign 传值到js)

    昨晚解决select 刷新页面以后选择的值保持不变,要想让seleted不变,有两种思路, 1,在提交表单的时候,将所选择的option的属性设为checked . 2.将option的value或者 ...

  9. element UI 导航栏根据路径来确定默认选中

    <template> <el-menu :default-active="activedMenu($route.path)" class="el-men ...

随机推荐

  1. 清理Linux 磁盘空间

    1.执行   lsof | grep deleted发现有大量刚刚删除文件的进程存在,kill掉进程(或者重启进程)   OK 2.查看磁盘信息:df -lh 3.循环定位最大文件目录:du -h - ...

  2. echars配置案例-reactnative

    option = { backgroundColor:'#fff', grid: { left: '3%', right: '4%', top:, bottom: '6%', containLabel ...

  3. 用 tomcat 部署 Jenkins

    在tomcat 下面部署 Jenkins 版本 tomcat (7.0.94) +  jdk (7) + jenkins (2.46.3) 前两次没有部署成功,应该是 jdk 版本的问题, 如果不成功 ...

  4. Excel 使用小技巧

    连接符,符号是&,输入方式为按住Shift+7“&”在连接单元格内容时,不管单元格格式为文本还是数值,都能连接,但得到的结果都是文本型数字. ="update tb_reco ...

  5. Native Clojure with GraalVM

    转自:https://www.innoq.com/en/blog/native-clojure-and-graalvm/ GraalVM is a fascinating piece of techn ...

  6. Promise以及async和await的用法

    Promise是一个异步加载的方式,处理时使用new Promise返回一个对象,该对象可以调用then方法,then方法中有两个参数,第一个参数是加载成功时执行,第二个参数是加载失败时执行,then ...

  7. 洛谷 P1801 黑匣子_NOI导刊2010提高(06) 题解

    昨晚恶补了一下二叉堆的内容 然后就找了几个二叉堆的题来做awa 然后发现用二叉堆做这题复杂度是O(nlogn) 但是有O(n)的解法 (某大佬这么说) 思路大概就是: 利用一个大根堆一个小根堆来维护第 ...

  8. hive基础知识五

    Hive 主流文件存储格式对比 1.存储文件的压缩比测试 1.1 测试数据 https://github.com/liufengji/Compression_Format_Data ​ M 1.2 T ...

  9. 记一次生产kafka消息消费的事故

    事故背景: 我们公司与合作方公司有个消息同步的需求,合作方是消息生产者,我们是消息消费者,他们通过kafka给我们推送消息,我们实时接收,然后进行后续业务处理.昨天上午,发现他们推送过来的广场门店信息 ...

  10. 搭建Hadoop+Python的大数据开发环境

    实验环境 CentOS镜像为CentOS-7-x86_64-Everything-1804.iso 虚机配置 节点名称 IP地址 子网掩码 CPU/内存 磁盘 安装方式 master 192.168. ...