使用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 相关文章推荐
JavaScript脚本语言在网页中的简单应用
May 13 Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
javascript变量作用域使用中常见错误总结
Mar 26 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
Jun 08 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
纯JS代码实现气泡效果
May 04 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
JavaScript动态加载重复绑定问题
Apr 01 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
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
《javascript少儿编程》location术语总结
2018/05/27 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
js代码实现轮播图
2020/05/04 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
浅谈对yield的初步理解
2017/05/29 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python语言的优势是什么
2020/06/17 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Python实现区域填充的示例代码
2021/02/03 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
为什么需要版本控制
2016/10/28 面试题
经济学博士求职自荐信范文
2013/11/23 职场文书
索桥的故事教学反思
2014/02/06 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
创业计划书之青年旅馆
2019/09/23 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技