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

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

0 голосов
/ 26 марта 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 -router маршрут к другой странице), заголовок приложения воссоздается (вызывается функция ловушки жизненного цикла create ())

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

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

Пожалуйста, обратите внимание! Я не хочу, чтобы маршруты оставались в живых, только сам заголовок приложения

Здесь приведены ссылки для просмотра моего кода, которые могут помочь вам лучше понять:

1 ) Приложение. vue (Pastebin)

2) Панель инструментов. vue (Pastebin)

3) Файлы маршрутизатора (Pastebin)

Обратите внимание, что в основном. js из Vue Я импортирую маршрутизатор и помещаю его первый параметр в объект типа "new Vue ({router, store, vuetify , render: h => h (App)}). $ mount ('# app'); ". «Приложение» - это импорт приложения. vue опубликовано, а vuetify - это плагин, который вы, наверное, уже знаете. Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще, я очень ценю вашу помощь !!

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

1 Ответ

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

<keep-alive> предназначен для сохранения состояния динамических c компонентов, т.е. <component :is="myComponent">

. Используйте <router-link to="/myroute"> или $router.push('/myroute') для перемещения между маршрутами и не динамическими c компонентами вне router-view сохранит свое состояние.

Вот простая демонстрация: https://jsfiddle.net/ellisdod/uzj8317m/

...