Vue Keep-Alive - компонент не останется в живых при изменении маршрута - PullRequest
Новая
       60

Vue Keep-Alive - компонент не останется в живых при изменении маршрута

0 голосов
/ 18 марта 2020

Я определил главную страницу моего vue приложения следующим образом: 

<div class="wrapper">
    <keep-alive>
      <app-header></app-header>
    </keep-alive>
    <router-view></router-view>
</div>

<script>
import appHeader from '../components/Header';

export default {
  components: {
    appHeader
  }
/* etc... */
}

Пользовательский интерфейс моего приложения - это, в основном, панель инструментов, с множеством различных маршрутов и путей вспомогательных маршрутов для отображения множества страниц, но на всех страницах (компонентах) я хочу, чтобы заголовок приложения отображался в верхней части страницы.

Проблема заключается в том, что я недавно заметил, что при нажатии на каждую кнопку (это изменяет маршрут vue -рутера к на другой странице) заголовок приложения воссоздается (вызывается функция ловушки жизненного цикла create ())

Я действительно не понимаю, почему, поскольку я добавил keep-alive, он не должен отображаться один раз?

Пожалуйста, помогите мне разобраться с этим, я застрял, я буквально исследовал весь inte rnet об этом.

Заранее спасибо

1 Ответ

0 голосов
/ 18 марта 2020

keep-alive будет работать только в разделе, заключенном в тег * <keep-alive>. Здесь будет работать только компонент app-header. Если вам нужно применить это ко всем компонентам в маршрутах, вы должны поместить <router-view> внутри <keep-alive>.

Например: 

  <keep-alive>
    <router-view></router-view>
  </keep-alive>

Теперь keep-alive будет работать для всех маршрутов.

...