使用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中的String对象常用方法
Feb 25 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
微信小程序前端promise封装代码实例
Aug 24 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程序
2006/10/09 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
2016/05/26 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
Python检测生僻字的实现方法
2016/10/23 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
详解python中的Turtle函数库
2018/11/19 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Opencv求取连通区域重心实例
2020/06/04 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
英国最全面的橄榄球联盟门票网站:Live Rugby Tickets
2018/10/06 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
在校生自我鉴定
2014/01/23 职场文书
寄语学生的话
2014/04/10 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
Python如何加载模型并查看网络
2022/07/15 Python