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

具体代码如下所示：

<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导航选中后刷新页面保持当前选中,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

• element-ui使用导航栏跳转路由的用法详解