VUE2.x 消息跳转至对应业务页面后，导航栏跟随变化

前端想实现一个点击消息标题，然后跳转到对应的业务页面，导航栏也跟随变化的功能，其实主要问题就在路由和父组件和子组件之间通信上。

首先来看当前的组件引用:

NoticeIcon.vue=>UserMenue.vue=>GlobalHeader.vue

NoticeIcon是消息组件，UserMenue是用户的导航栏组件，GlobalHeader是网站标准导航栏组件

首先来实现子组件向父组件通信的问题

NoticeIcon.vue=>UserMenue.vue=>GlobalHeader.vue

this.$emit("方法名",参数) //子组件调用父组件的方法，支持双向绑定

this.$emit.event命令会调用父组件的方法，注意方法名一定要和父组件的方法保持一致，在父组件引用子组件的标签上绑定此方法。这么做是双向绑定的，当子组件调用父组件的方法时，父组件方法中的变量被修改后，父组件对应的view视图也会有响应的变化。

//子组件NoticeIcon中的方法
comeTo(record){
      this.visible=false
      this.$parent.switchApp(record.appCode) //更新缓存中的路由表
      setTimeout(() => { //延迟300毫秒后执行，等待路由表更新完成
        this.$router.push(record.path) //跳转
        this.$emit("changeSelectedApp",[record.appCode])//菜单栏跟随路由变化，调用父组件UserMenue
        }, 300);
        
    }

在父组件UserMenue中绑定方法

<!--视图中引入子组件-->
<notice-icon class="action" @changeSelectedApp="changeSelectedApp"/>
//script中
import NoticeIcon from '@/../../NoticeIcon'

//method中声明同名的方法
   changeSelectedApp(defApp){
        this.$emit("changeSelectedApp",defApp) //参数传递给父组件，方法同上，通知父组件GlobalHeader做改变
      }

在GlobalHeader方法的Menu中，添加selectedKeys属性，他的作用是展示当前被选择的菜单项。

<a-menu style="height: 55px; border-bottom: 0px;" mode="horizontal" :default-selected-keys="this.defApp" :selectedKeys="this.defApp">

//method中，被子组件调用，修改meau中当前被选择的菜单
      changeSelectedApp(defApp){
        this.defApp=defApp
      }

经过以上操作后，当动态路由表被更新后，使用this.$router.push(path)命令即可跳转到指定的业务页面，后面跟随子父组间的通信，导航栏也能随之更改了。