@KoiLVeD

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

Все привет) возникла проблема)
Имею такую структуру
<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 пробовал не получается(
спасибо)
  • Вопрос задан
  • 1418 просмотров
Решения вопроса 1
mr_T
@mr_T
Web-разработчик
Если app-header опирается именно но роутер и только на роутер (то есть другие компоненты не будут непосредственно влиять на показ каких-то элементов), то можно сделать очень красиво и изящно через computed, что-то типа такого:
computed: {
    headerTab() { return this.$route.path === '/result'; }
}


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

Если же переменная должна зависеть от каких-то плохо предсказуемых внутренних состояний компонентов, то либо использовать подход с событиями, либо уже переходить к тяжёлой артиллерии - брать vuex и опираться на state. Но если вы думаете, что этот способ подходит для данной задачи, то я почти уверен, что вы делаете что-то не так :)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Artem0071
Безработный mr. Junior
Я так понял что тебе просто нужно следить за тем, когда меняется путь
для этого есть метод "watch"
Поэтому в том компоненте, в котором нужно следить за путями, вставь этот код:
watch: {
    '$route': function(){
                  ....
     }
Ответ написан
Комментировать
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы