elementUI的导航栏在刷新页面的时候选中状态消失的解决
首先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的导航栏在刷新页面的时候选中状态消失的解决的更多相关文章
- Vue ElementUI主页面搭建和导航栏使用,并在刷新页面的时候选中状态消失的问题解决
<template> <div style="height:100%;width: 100%; padding:0 auto; margin: 0 auto;"& ...
- element-ui使用导航栏跳转路由用法
element-ui使用导航栏跳转路由用法 最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项 ...
- PHP 使用数字作为SESSION的Key,一刷新页面session丢失,Session消失,无法存储
PHP 使用数字作为SESSION的Key,一刷新页面session丢失,Session消失,无法存储 项目中有用到md5截取做session key值的,有些md5截取出来的部分是纯数字的,导致部分 ...
- 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
问题: 使用第三方库IQKeyboardManager时会使整个页面上移,导航栏页偏移出了显示范围.在聊天界面就会使得上面的消息看不到. 解决方法: 首先说明:在聊天界面使用IQKeyboardMan ...
- 根据location地址,在导航栏高亮显示当前页面
获取当前页面的地址栏.与导航栏中所有<a> 标签的href属性 进行比较.如果相等则高亮显示 此<a>标签. 注意点:a 标签的href 属性在浏览器解析时 是绝对路径. a ...
- elementUI的导航栏怎么根据路由默认选中相关项
1. <el-menu :default-active="this.$route.path.substr(1)" class="left-nav"> ...
- elementui更改导航栏样式
本来是这样,有下划线有点击背景,但是业务需求不需要,就想办法进行隐藏,控制台可以观察效果找出相应的类进行格式书写 以下效果: 放上代码 <style> .el-menu-demo{ hei ...
- selected 刷新页面后selected选中的值保持不表(thinkphp 从控制器assign 传值到js)
昨晚解决select 刷新页面以后选择的值保持不变,要想让seleted不变,有两种思路, 1,在提交表单的时候,将所选择的option的属性设为checked . 2.将option的value或者 ...
- element UI 导航栏根据路径来确定默认选中
<template> <el-menu :default-active="activedMenu($route.path)" class="el-men ...
随机推荐
- AQS 抽象队列同步器(Abstract Queued Synchronizer) 知识点
AQS的主要使用方式是继承,子类通过继承同步器并实现它的抽象方法来管理同步状态. AQS使用一个int类型的成员变量state来表示同步状态,当state>0时表示已经获取了锁,当state = ...
- nginx 请求文件 进行用户认证/鉴权: internal(限制为内部调用)
在进行WEB开发时, 必然会遇到向用户返回文件的场景(如图片, 文档等等), 当返回的文件较小时, 我们可以直接通过接口以数据流的形式向前台返回, 因为文件较小, 因此也不会太过于影响响应速度及服务器 ...
- 开始Golang之旅了
- 7-ESP8266 SDK开发基础入门篇--串口处理数据,控制LED
接着上一节的写 咱先做一个单片机串口接收到什么就回过来什么 咱自己写个发送函数,其实就是仿照官方的写的 别忘了 现在咱建个任务处理串口数据 下载进去 现在是三个任务都在运行了...操作系统是不是很神奇 ...
- QT QWidget 关闭的流程
当QWidget被点击右上角“X”关闭时: 1.调用虚函数closeEvent 2.调用QWidget的析构函数
- bzoj2839 集合计数 组合计数 容斥原理|题解
集合计数 题目描述 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得它们的交集的元素个数为K,求取法的方案数,答案模1000000007.(是 ...
- docker for mac的JSON配置文件中的hosts项修改后无法生效
docker for mac的JSON配置文件中的hosts项修改后无法生效 docker 2.1k 次浏览 问题对人有帮助,内容完整,我也想知道答案0问题没有实际价值,缺少关键内容,没有改进余地 增 ...
- 运维-安装rabbitmq 集群
服务器: online-platform-rabbitmq-01 online-platform-rabbitmq-02 online-platform-rabbitmq-03 绑定HOSTS: ...
- ESRally压测ElasticSearch性能 CentOS 7.5 安装 Python3.7
1,CentOS 7.5 安装 Python3.7 1.安装开发者工具 yum -y groupinstall "Development Tools"2.安装Python编译依赖包 ...
- 关于MySQL 通用查询日志和慢查询日志分析(转)
MySQL中的日志包括:错误日志.二进制日志.通用查询日志.慢查询日志等等.这里主要介绍下比较常用的两个功能:通用查询日志和慢查询日志. 1)通用查询日志:记录建立的客户端连接和执行的语句. 2)慢查 ...