Возникло событие при изменении маршрута до изменения 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()
  }
}