elementui组件中取消el-menu的选中状态

时间:2025-01-20 14:54:51

链接:/p/c2b6a6152ce9

// 折叠当前展开的菜单栏。

 this.$(this.$[0])

// 取消菜单栏的当前选中状态。

 this.$ = 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){
        (val);//新路由信息
        (oldval);//老路由信息
        if(=='smViewer'){
           this.$(this.$[0]);
           this.$ = null
        }
      },
      // 深度观察监听
      deep: true
    }
  },

 结果: