<el-menu :default-active=‘$route.path‘ :router=‘true‘ :unique-opened=‘true‘ :default-openeds="defaultOpeneds" 
        background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b">         
        //router当导航激活时允许以index作为路由进行页面的跳转,$route.path当前路由对象的路径,字符串,绝对路径         
        //unique-opened只允许有一个下拉菜单处于打开的状态         
        //使用default-active来实现当前菜单激活的选项
        //default-openeds当前打开的 sub-menu 的 index 的数组
<el-menu-item index=‘/home‘>首页</el-menu-item>
<el-submenu>
<template slot="title">
<i class=‘‘></i><span>导航一</span>
</template>
<el-menu-item index=‘/first/page1‘>
<template slot="title">
<i class=‘‘></i><span>选项一</span>
</template>
</el-menu-item>
<el-menu-item index=‘/first/page2‘>
<template slot="title">
<i class=‘‘></i><span>选项二</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu
>
     mounted(){
let path = this.$route.path;
this.navConfig = [
{index:'1',path:['/system/aa','/system/bb','/system/cc']},
];
let thisNav = this.navConfig.find(item =>{
return item.path.includes(path);
});
this.defaultOpeneds = [thisNav.index];
}

使用element-ui的el-menu导航选中后刷新页面保持当前选中的更多相关文章

  1. elementUI的导航栏在刷新页面的时候选中状态消失的解决

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

  2. element ui 渲染超过上百条数据时页面卡顿,更流畅的加载大量数据

    问题:element ui table渲染上百条数据,页面渲染开始出现延时 解决方案:使用pl-table 注意:设置use-virtual并给定table高度

  3. element ui aside — 侧栏导航菜单移入移出折叠效果

    效果如图,移入移出控制折叠,点击按钮后移入移出不可控制折叠. 功能是很简单的功能,不过昨天这块还是弄了小一个小时,所以记录下来. 发现的问题: 模版上el-aside写上@mouseenter无效 解 ...

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

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

  5. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  6. Element UI - 打开弹出框(el-dialog)页面会抖动

    当 dialog 出现时,页面右边缩小了 5px,模态框看起来会抖动 解决方案 发现 body 多了样式:padding-right: 5px 和 overflow: hidden.紧接着我就在全局设 ...

  7. iView中Tree组件children中动态checked选中后取消勾选再选中无效问题

    如题,我有一个Tree组件,动态更新check选中子级列表的时候,取消勾选了再点击选中时复选框样式不是勾选状态,但是数据已经有了. 对此解决方案是:将初始化时Tree组件data数据深拷贝一遍再去判断 ...

  8. cell选中后进入重用池出来选中状态消失

    #import "XXViewController.h" @interface XXViewController ()<UITableViewDelegate,UITable ...

  9. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

随机推荐

  1. goroutine,channel

    Go语言中有个概念叫做goroutine, 这类似我们熟知的线程,但是更轻. 以下的程序,我们串行地去执行两次loop函数: package main import "fmt" f ...

  2. 数据结构javascript实现

    电脑配置 CPU:AMD X4 640 内存: 宏想 DDR3 1600MHz 8g 主板:华擎 980DE3/U3S3 R2.0 浏览器:chrome 79.0.3945.88(正式版本) (64 ...

  3. js的委托事件----Vue

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS基础语法---作用域

    作用域:使用范围 全局变量: 声明的变量是使用var声明的, 那么这个变量就是全局变量 全局变量可以在页面的任何位置使用 除了函数以外, 其他的任何位置定义的变量都是全局变量 局部变量:在函数内部定义 ...

  5. elasticsearch安装与使用

    一.windows10上安装elasticsearch Elasticsearch 需要 Java环境,在安装Elasticsearch之前先安装好JDK. 本文安装jdk1.8,es6.3.2为例. ...

  6. git submodule git 子模块管理相关操作

    Git 子模块操作相关的一些命令备忘: # 当使用git clone下来的工程中带有submodule时,初始的时候 submodule的内容并不会自动下载下来的,需执行如下命令: git submo ...

  7. Linux系统学习 五、网络基础—网络通信协议

    OSI/ISO七层模型和TCP/IP四层模型 网络层协议和IP划分 OSI的七层框架 物理层:设备之间的比特流的传输.物理接口.电气特性等. 数据链路层:成帧.用MAC地址访问媒介.错误检测与修正. ...

  8. FormData的介绍(一)

    FormData对象介绍FormData字母意思是表单数据,H5新增的一个内置对象.可以获取任何类型的表单数据,如text radio checkbox file textarea 常用语发送ajax ...

  9. Linux运维基础篇大全

    基础知识的文章都在这里https://www.jianshu.com/u/a3c215af055a ,想要了解,请访问这个地址!!!!

  10. 打造IP代理池,Python爬取Boss直聘,帮你获取全国各类职业薪酬榜

    爬虫面临的问题 不再是单纯的数据一把抓 多数的网站还是请求来了,一把将所有数据塞进去返回,但现在更多的网站使用数据的异步加载,爬虫不再像之前那么方便 很多人说js异步加载与数据解析,爬虫可以做到啊,恩 ...