在DOM更改之前和路由本身之外更改路由时触发事件？答案

【问题标题】：Fire event when changing route before DOM changes and outside the route itself?在DOM更改之前和路由本身之外更改路由时触发事件？
【发布时间】：2018-10-01 14:38:27
【问题描述】：

我打开了a similar topic a few days ago，建议我在路由组件定义中使用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')

【问题讨论】：

抱歉，请问您需要完成什么？因为我不明白。如果你构建一个组件为什么不添加一个可以分配的事件处理程序，那么最终开发人员可以为组件分配一个beforeRouteLeave事件，你甚至可以为此编写代码，那么你只需要检查是否事件处理程序已分配。
我不明白你为什么不能在MyComponent 中定义beforeRouteLeave？
beforeRouteLeave 是navigation guards。看来它们只能在路由组件中使用。

标签： vue.js vue-router vue-events

【解决方案1】：

在 Vue 实例生命周期中，一旦 DOM 发生变化，就会调用钩子 beforeDestroy。

您很可能正在寻找一个beforeUnmount 挂钩，它位于mounted 和beforeDestroy 之间，但它不可用：

但是，您可以利用JavaScript hooks。有一个名为 leave 的 JavaScript 钩子，您可以在其中访问 DOM，然后再更改。

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

为此，您需要将元素包装在 <transition> 包装器组件中。

即。

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

...

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

【讨论】：