使用element-ui的el-menu导航选中后刷新页面保持当前选中状态


Posted in Javascript onJuly 19, 2019

具体代码如下所示:

<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];
    }

ps:下面看下vue Element-ui el-menu 左侧导航条

<template>
 <!--实现左侧导航条动态渲染(三级)-->
 <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" router unique-opened
 background-color="#545c64"
 text-color="#fff"
 active-text-color="#ffd04b">
 <el-menu-item index="/home/main">
 <i class="el-icon-document"></i>
 <span slot="title">首页</span>
 </el-menu-item>
 <el-submenu v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length>0&&item.level==1" :index="item.linkname">
 <template slot="title">
 <i class="el-icon-location"></i>
 <span slot="title">{{item.linkname}}</span>
 </template>
 <el-submenu v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length>0&&child.level==2" :key="child.id" :index="child.linkname">
 <span slot="title">{{child.linkname}}</span>
 <el-menu-item v-for="three in child.children" :data="three" v-if="child.id==three.parentid&&child.children.length!=0&&three.level==3" :key="three.id" :index="three.link">
 <span slot="title">{{three.linkname}}</span>
 </el-menu-item>
 </el-submenu>
 <!--2无子级显示-->
 <el-menu-item v-for="(child,seq) in item.children" :data="child" v-if="item.id==child.parentid&&child.children.length==0&&child.level==2" :key="child.id" :index="child.link">
 <span slot="title">{{child.linkname}}</span>
 </el-menu-item>
 </el-submenu>
 <!--1无子级显示且不支持点击事件-->
 <el-menu-item v-for="(item,index) in content" :key="item.id" :data="item" v-if="item.children.length==0&&item.level==1" :index="item.linkname" :disabled="item.children.length==0 ? true : false ">
 <i class="el-icon-setting"></i>
 <span slot="title">{{item.linkname}}</span>
 </el-menu-item>
 </el-menu>
 </div>
</template>
<script>
import axios from "axios";
import $ from 'jquery';
export default {
 data() {
 return {
 content: [],
 isCollapse: false,
 defaultProps: {
 children: 'children',
 label: 'linkname'
 }
 };
 },
 mounted(){
 var _self = this;
 axios.get('https://5b90a18b3ef10a001445d08e.mockapi.io/api/v1/resources')
 .then(function (response) {
 _self.content = returnZhData(response.data);
 })
 .catch(function (error) {
 console.log(error);
 });
 },
 methods: {
 handleOpen(key, keyPath) {
 console.log(key, keyPath);
 },
 handleClose(key, keyPath) {
 console.log(key, keyPath);
 },
 handleNodeClick(content) {
 console.log(content);
 }
 }
}
function returnZhData(data){
 var arrone=[];
 $.each(data, function(index,one) {
 if(one['level'] == 1){
 arrone.push(one);
 var arrtwo=[];
 $.each(data, function(index,two) {
 if(two['level'] == 2 && two['parentid']==one['id']){
 arrtwo.push(two);
 var arrthree=[];
 $.each(data, function(index,three) {
 if(three['level'] == 3 && three['parentid']==two['id']){
 arrthree.push(three);
 }
 });
 two.children=arrthree;
 }
 });
 one.children = arrtwo;
 }
 });
 return arrone;
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
 width: auto;
 min-height: 400px;
}
</style>

总结

以上所述是小编给大家介绍的使用element-ui的el-menu导航选中后刷新页面保持当前选中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
jQuery中:animated选择器用法实例
Dec 29 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
vue router 通过路由来实现切换头部标题功能
Apr 24 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 #Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
Jul 19 #Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 #Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 #Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 #Javascript
bootstrap Table实现合并相同行
Jul 19 #Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 #Javascript
You might like
信用卡效验程序
2006/10/09 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
浅析JS运动
2015/12/28 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
王老吉广告词
2014/03/20 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
保护环境倡议书100字
2014/05/19 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
毕业生个人总结
2015/02/28 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书
工作服管理制度范本
2015/08/06 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
2021好看的国漫排行榜前十名 《完美世界》上榜,《元龙》排名第一
2022/03/18 国漫
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript