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选中打开路由页面时是选中状态,在关闭当前打开的路由页面恢复导航栏el-menu-item未选中的状态;

接下来上代码来进行实现...............

 1.这是关闭路由页面后会跳转到首页而el-menu-item还是选中的状态,现在要将他选中的状态取消掉

2.使用watch 监听路由的变化,判断当跳转到首页时恢复未选中状态

选给el-menu一个ref     

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
    }
  },

 结果:

 

你可能感兴趣的:(javascript,vue.js,elementui,html,scss)