Vue.js переход компонентов из-за изменения маршрута - PullRequest
Новая
       23

Vue.js переход компонентов из-за изменения маршрута

0 голосов
/ 13 января 2019

У меня есть приложение SPA, которое меняет представления через Vue-маршрутизатор. Все работает отлично, однако я хотел использовать тег перехода для плавной навигации по маршрутам. Однако я не хочу анимировать всю страницу, только некоторые компоненты. Я также использую GSAP TweenMax для анимации, а не чистого CSS. Вот как выглядит шаблон:

App.vue: 

<template>
    <div id="container" ref="container">
            <gameHeader></gameHeader>
            <router-view ref="router"/>
    </div>
</template>

И один из просмотров: 

<transition name="custom" mode="out-in" @enter="enter" @leave="leave">
<div id="containerContent" v-show="mounted">
    <div id="gameContent">
    </div>
</div>
</transition>

и скрипт для этого представления: 

mounted() {
    this.mounted = true;
},
methods: {
    enter:function(el, done){  
        console.log('starting enter', el, this.$refs)
        TweenMax.fromTo(el, 1, {opacity: 0}, { opacity: 1, onComplete: function() { console.log('finish enter'); done} });
    },
    leave: function(el, done) {
        console.log('starting leave', el, this.$refs)
        TweenMax.to(el, 1, {opacity: 0, onComplete: function() { console.log('finish leave'); done}})
    },
},
data() {
   return {
      mounted: false;
  }
}

Все маршруты имеют одинаковую структуру. Здесь вы можете заметить переменную this.mounting, которая необходима для изменения на смонтированном спасательном крюке, поэтому переход инициируется. Также есть console.logs, чтобы они сообщали, когда и если войти и выйти. Проблема в том, что метод "отпуск" никогда не вызывается. Вероятно, это связано с тем, что при изменении маршрута все компоненты в представлении роутера уничтожаются немедленно, поэтому больше нет времени для выполнения команды «уйти».

Я мог бы поместить тег router-view в обернутый тег перехода, но router-view отличается в разных представлениях, и я хочу, чтобы разные анимации зависели не от всего представления маршрутизатора, а от определенного компонента.

Есть одна идея, чтобы решить это, но я думаю, что это далеко от хорошего решения: Каждый метод 'exit' вызывает функцию onComplete this. $ Route.replace (), поэтому реальное изменение маршрута выполняется после завершения анимации. Это довольно сложно, потому что может быть несколько переходных компонентов в одном представлении, и между ними могут быть некоторые скачки - один может закончиться раньше, чем другой, и, возможно, перенаправление должно быть выполнено через Promieses. У вас есть лучшее, но более простое решение для решения этой проблемы перехода?

...