在DOM更改之前且在路由本身之外更改路由时引发事件?

时间:2018-10-01 14:38:28

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

我打开了a similar topic a few days ago,建议我在路由组件定义中使用beforeRouteLeave

但是,我正在创建Vue组件,并且无法控制开发人员如何定义其路由组件。因此,我需要一种在自己的组件内触发事件并且不依赖外部路由组件的方法。

从一条路线更改为另一条路线时,{strong}在DOM结构更改后被触发。

我尝试在组件定义中使用beforeDestroybeforeUpdate事件,但似乎在DOM更改之前都没有触发。

updated

1 个答案:

答案 0 :(得分:2)

在Vue实例生命周期中,一旦DOM更改,钩子beforeDestroy就被调用。

您最有可能在寻找beforeUnmount钩子,该钩子在mountedbeforeDestroy之间,但不可用:

lifecycle vue

但是,您可以利用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()
  }
}