链接:https://www.jianshu.com/p/c2b6a6152ce9
// 折叠当前展开的菜单栏。
this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0])
// 取消菜单栏的当前选中状态。
this.$refs.elMenu.activeIndex = null
我的开发中有个需求是当前el-menu-item选中打开路由页面时是选中状态,在关闭当前打开的路由页面恢复导航栏el-menu-item未选中的状态;
接下来上代码来进行实现...............
1.这是关闭路由页面后会跳转到首页而el-menu-item还是选中的状态,现在要将他选中的状态取消掉
2.使用watch 监听路由的变化,判断当跳转到首页时恢复未选中状态
选给el-menu一个ref <el-menu ref="elMenu">
watch:{
// 取消导航栏的选中状态
$route:{
handler(val,oldval){
console.log(val);//新路由信息
console.log(oldval);//老路由信息
if(val.name=='smViewer'){
this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0]);
this.$refs.elMenu.activeIndex = null
}
},
// 深度观察监听
deep: true
}
},
结果: