Возникло событие при изменении маршрута до изменения DOM и за пределами самого маршрута?

Question

Я открыл аналогичную тему несколько дней назад , где мне предложили использовать beforeRouteLeave в определении компонента маршрута.

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

При переключении с одного маршрута на другой, beforeDestroy срабатывает после структура DOM меняется.

Я пытался использовать события beforeUpdate и updated в моем определении компонента, но, похоже, ни одно из них не сработало до изменения DOM.

import Vue from 'vue'
import MyComponent from '../myComponent/' // <-- Need to fire the event here 
import router from './router'

Vue.use(MyComponent)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
}).$mount('#app')

Answer 1

В жизненном цикле экземпляра Vue хук beforeDestroy вызывается после изменения DOM.

Скорее всего, вы ищете хук beforeUnmount, который будет между mounted иbeforeDestroy, но это недоступно:

Однако вы можете воспользоваться JavaScript-хуками .Есть JavaScript-хук с именем leave, где вы можете получить доступ к DOM до того, как он изменится.

leave: function (el, done) {
  // ...
  done()
},

Чтобы это работало, вам нужно заключить свой элемент в <transition> компонент оболочки.

то есть.

<transition
  :css="false"
  @leave="leave"
>
  <div>
    <!-- ... -->
  </div>
</transition>

...

methods: {
  leave(el, done) {
    // access to DOM element
    done()
  }
}