使用element-ui的el-menu导航选中后刷新页面保持当前选中
2024-09-03 08:58:48
<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];
}
最新文章
- google.GIS小例子
- ACM/ICPC 之 一道不太简单的DP面试题(Geeksforgeeks)
- 二 、打开地图《苹果iOS实例编程入门教程》
- Generic Netlink详解
- 利用python yielding创建协程将异步编程同步化
- SpringAOP的注解方式
- Google java编程技术规范
- BZOJ 2298 problem a(区间DP)
- Android窗口管理服务WindowManagerService的简要介绍和学习计划
- ASP.NET MVC 学习之路-6
- 在win7/8/10鼠标右键添加按下SHIFT键时弹出的“在此处打开命令窗口”
- C++小技巧之CONTAINING_RECORD
- Linux 练习(1)
- java中包的定义
- 数据定义语言(DDL Data Definition Language)基础学习笔记
- mysql5.7 参数记录 (持续更新)
- MyTomcat(手写服务器)
- unity3d-角色控制器续
- 机器学习进阶-疲劳检测(眨眼检测) 1.dist.eculidean(计算两个点的欧式距离) 2.dlib.get_frontal_face_detector(脸部位置检测器) 3.dlib.shape_predictor(脸部特征位置检测器) 4.Orderdict(构造有序的字典)
- Chrome控制台格式化输出