Как изменить другой компонент при изменение пути(vue-router)?

Question

[Nik]

Все привет) возникла проблема)
Имею такую структуру

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

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

В router-view подставляются разные компоненты с путями, например:

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

По логике при изменение пути( на "/result") мне нужно менять состояние некоторых элементов в компоненте "app-header".
например передать переменную с false чтобы убрать блок

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

Как достучатся(передать данные) до этого компонента или какие условия прописать, чтобы изменить данные?
через $on и $emit пробовал не получается(
спасибо)

Answer 1

[Тимофей]

Если app-header опирается именно но роутер и только на роутер (то есть другие компоненты не будут непосредственно влиять на показ каких-то элементов), то можно сделать очень красиво и изящно через computed, что-то типа такого:

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

Если предполагается что-то более сложное, то можно аналогичным образом воспользоваться полем this.$route.meta (подробнее)

Если же переменная должна зависеть от каких-то плохо предсказуемых внутренних состояний компонентов, то либо использовать подход с событиями, либо уже переходить к тяжёлой артиллерии - брать vuex и опираться на state. Но если вы думаете, что этот способ подходит для данной задачи, то я почти уверен, что вы делаете что-то не так :)

Comments

[Nik]

Тимофей
Спасибо за ответ. я реализовал по клику)т.е по клику запускается fu

clickHeader() {
        bus.$emit('clickHeader', this.headerTabs);
      },

и через эмит передают)
с Ваших слов как я понял, лучше так не делать?)

[Тимофей]

Это плохо тем, что другие компоненты должны содержать код, который влияет на app-header. Одна из основных идей подхода с компонентами - это их низкая связность, то есть любое влияние одного компонента на другой без веской на то причины - это скорее всего плохо. Конечно, могут быть и исключения, но мне кажется, что ваш случай слишком простой, для того, чтобы таким быть. Хотя на 100% утверждать этого я не могу, так как всего кода не вижу.

[Тимофей]

Поэтому я и говорю, что нужно эту логику вынести или вообще за пределы компонентов (то есть в meta поле роута), или оставить внутри app-header (то есть как computed property).

Answer 2

[Artem0071]

Я так понял что тебе просто нужно следить за тем, когда меняется путь
для этого есть метод "watch"
Поэтому в том компоненте, в котором нужно следить за путями, вставь этот код:

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

Answer 3

[Evgeny Kulakov]

Покурите вот это: https://ru.vuejs.org/v2/guide/components.html#Комм...