系统消息查看，路由跳转到相应页面，菜单栏并展开相对菜单

如下图所示，点击全局消息后跳转到左下角绿框下的一个子菜单。

 结构分析一下，项目用了ant design vue布局功能。布局内容是编辑再Hom里面的，右侧菜单使用了组件形式引入，所以存在了父级和子集传值的问题。（不方便展示全部代码）演示部分内容

 现在就是需要在Home页面里面去给左侧菜单传值控制路由，并展开对应菜单选项。

Home.vue里面
// 跳转到告警页面
    handleClick(e) {
     //openCurrent 是在data里面定义好的
      this.openCurrent = e.key;
    },
html部分
<SideMenu :openCurrent="openCurrent" @clearPath="clearPath"></SideMenu>
js部分
// 清空一次告警跳转路径
    clearPath() {
      this.openCurrent = "";
    },

SilderMenu.vue
props: {
    openCurrent: {
      type: String,
    },
  },
 watch: {
    openCurrent: function (val, oldVal) {
      console.log(val);
      // 如果openCurrent改变就让他跳转
      this.flag = true;
      if (val.indexOf("/") > -1) {
        //树状菜单组件控制展开当前项
        this.current = this.openCurrent;
        //树状菜单组件控制展开当前项的key值
        this.openKeys = ["/", "/alarms"];
        // 路由跳转
        this.$router.push(this.openCurrent);
        console.log("current变化", this.current);
      }
    },
  },

实现方案是，父组件定义变量变化传入子组件，子组件通过watch监听到值变化后，对路由和菜单做出反应。传到子组件中后，把值给三个变量，有关树状菜单的两个参数可以根据官方文档研究一下。最后一个路由跳转就不用讲了吧。最后实现目的效果。

有关清空值

SilderMenu.vue
//该方法是在菜单项被点击时候触发的
handleClick(e) {
      this.current = e.key;
      if (this.flag) {
        this.flag = false;
        this.$emit("clearPath");
      }
      if (e.key == "logout") {
        this.logout();
      } else {
        //如果key为路由则跳转
        if (e.key.indexOf("/") > -1) {
          this.$router.push(e.key);
        }
      }
    },

总结，为什么要子组件获取值后又控制父组件清空值呢，目的在watch监听是监听之变化的，如果你点击一次以上的查看全局消息按钮就不会再触发watch里面的赋值方法了，不论你是否在这个过成功点击过左侧菜单，清空值的过程发生在点击左侧任意菜单项的时候，通过flag标记是否要进行清空操作，flag的true来自全局的告警按钮点击，可以看一下上图watch里面。