Vue переходов и мгновенного исчезновения компонента

Question

В настоящее время при использовании перехода в Vue я сталкиваюсь с проблемой того, что некоторые компоненты на странице исчезают мгновенно, тогда как остальные обычно исчезают со всей страницей.

Это мои настройки перехода здесь работает как минимальный воспроизводимый пример Codepen . При переключении с маршрута Home на любой другой маршрут вы можете видеть, что кнопка мгновенно исчезает, а остальная часть вида исчезает в соответствии со свойствами затухания, установленными с помощью css. (и vue переходы).

// https://github.com/groloop/vuejs-2-series
Vue.use(Vuetify);
Vue.use(VueRouter);

var Home = {
  template: '<div> <h2>Home</h2> <v-tooltip left> <template v-slot:activator="{ on }"> <v-btn color="primary" dark v-on="on">Left</v-btn> </template> <span>Left tooltip</span> </v-tooltip> </div>'
}

var AboutUs = {
  template: '<h2>About Us</h2>'
}

var Contact = {
  template: '<h2>Contact</h2>'
}

var NotFound = {
  template: '<h2>Not Found</h2>'
}


var router = new VueRouter({
  history: false,
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/about-us', name: 'about-us', component: AboutUs },
    { path: '/contact', name: 'contact', component: Contact },
    { path: '*', name: 'not-found', component: NotFound }
  ],
});

new Vue({
  el: '#app',
  router: router
});

.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.5s;
  transition-property: opacity;
  transition-timing-function: ease-in;
}

.fade-enter-active {
  transition-delay: .5s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0
}

<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <v-toolbar>
    <v-toolbar-title>TEST</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items>
      <v-btn flat href="#/">Home</v-btn>
      <v-btn flat href='#/about-us'>About us</v-btn>
      <v-btn flat href='#/contact'>Contact</v-btn>
      <v-btn flat href='#/test'>Test</v-btn>
    </v-toolbar-items>
  </v-toolbar>
  <transition name="fade" mode="out-in">
    <router-view></router-view>
  </transition>
</div>

Answer 1

Это, вероятно, связано с тем, как v-tooltip работает внутри. Вы можете видеть, что если вы возьмете компонент кнопки вне слота шаблона в компоненте v-tooltip, переход будет работать правильно.

Компонент v-tooltip может иметь ловушку уничтожения жизненного цикла, которая просто разрушает визуализированный узел DOM , что может вызвать проблемы. Обходным решением будет сохранить <router-view> в рабочем состоянии:

<transition name="fade" mode="out-in">
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

Однако это может быть нежелательно, особенно если у вас используются очень тяжелые компоненты, используемые маршрутизатором, или если у вас много просмотров быть в живых:

Решение 1: Ограничить максимальное количество компонентов, чтобы остаться в живых

Поскольку вас интересует только исчезновение последнего уничтоженного компонента, вы можете использовать max атрибут в оболочке <keep-alive>, так что вы сохраняете только последний уничтоженный элемент. Примерно так будет работать:

<transition name="fade" mode="out-in">
  <keep-alive v-bind:max="2">
    <router-view></router-view>
  </keep-alive>
</transition>

Решение 2. Явно включите компоненты, которые необходимо поддерживать живыми

В качестве альтернативы, вы можете выборочно поддерживать компоненты с <v-tooltip> живыми. В вашем примере проблема возникает только у компонента Home, поэтому вы можете дать ему имя:

var Home = {
  template: '<div> <h2>Home</h2> <v-tooltip> <template v-slot:activator="{ on }"> <v-btn color="primary" dark v-on="on">Left</v-btn> </template> <span>Left tooltip</span> </v-tooltip> </div>',
  name: 'Home'
}

И затем динамически связать массив с атрибутом include компонента <keep-alive> :

<transition name="fade" mode="out-in">
  <keep-alive :include="componentsToKeepAlive">
    <router-view></router-view>
  </keep-alive>
</transition>

В вашем JS:

new Vue({
  el: '#app',
  router: router,
  data: {
    componentsToKeepAlive: ['Home']
  }
});