1

几天前我开了一个类似的话题，有人建议我beforeRouteLeave在路由组件定义中使用。

但是，我正在创建一个 Vue 组件，我无法控制开发人员希望如何定义他们的路由组件。因此，我需要一种在我自己的组件中触发事件而不依赖于外部路由组件的方法。

当从一个路由更改到另一个路由时，DOM 结构更改后beforeDestroy会触发。

我已经尝试在我的组件定义上使用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')
4

1 回答 1

2

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

您很可能正在寻找一个介于和之间的beforeUnmount钩子，但这不可用：mountedbeforeDestroy

生命周期

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

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

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

IE。

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

...

methods: {
  leave(el, done) {
    // access to DOM element
    done()
  }
}
于 2018-10-01T17:49:43.957 回答