How to change another component on path change (vue-router)?

Question

Vue.js

Hello everyone) there was a problem)
I have such a structure

<div id="app">
    <app-header></app-header>

    <transition name="fade">
      <router-view></router-view>
    </transition>
  </div>

Various components with paths are substituted in the router-view, for example:

<router-link to="/result"
                     tag="div"
                     class="progress__item-text">
                     Переход
</router-link>

Logically, when changing the path (to "/result"), I need to change the state of some elements in the "app-header" component.
for example, pass a variable with false to remove the block

<div class="header__tabs"
         v-if="headerTab">
         <...>       
</div>

How to reach (pass data) to this component or what conditions to prescribe in order to change the data?
I tried using $on and $emit, but it doesn't work (
thank you)

Answer 1

If the app-header relies specifically on the router and only on the router (that is, other components will not directly affect the display of any elements), then you can do it very beautifully and gracefully through computed, something like this:

computed: {
    headerTab() { return this.$route.path === '/result'; }
}

If something more complex is expected, then you can use the this.$route.meta field in the same way ( more )
artillery - take vuex and rely on state. But if you think that this way is suitable for this task, then I'm almost sure that you are doing something wrong :)

Answer 2

I understand that you just need to keep track of when the path changes
, there is a "watch" method for this.
Therefore, in the component in which you need to monitor the paths, paste this code:

watch: {
    '$route': function(){
                  ....
     }

Answer 3

Smoke this: https://en.vuejs.org/v2/guide/components.html#Comm...