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

链接：https://www.jianshu.com/p/c2b6a6152ce9// 折叠当前展开的菜单栏。this.$refs.elMenu.closeMenu(this.$refs.elMenu.openedMenus[0])// 取消菜单栏的当前选中状态。this.$refs.elMenu.activeIndex = null我的开发中有个需求是当前el-menu-item选中打开路由页面

燃烧的冰山..

8700人浏览 · 2022-04-19 11:40:10

燃烧的冰山.. · 2022-04-19 11:40:10 发布

链接：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
    }
  },

结果：