在 DOM 更改之前更改路线并且在路线本身之外更改路线时触发事件？

Question

我打开了，建议我在路由组件定义中使用 beforeRouteLeave。

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

当从一条路线更改为另一条路线时，beforeDestroy 在结构发生变化后 被触发。

我已经尝试在我的组件定义中使用 beforeUpdate 和 updated 事件，但是 none 似乎在 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 实例生命周期中，一旦 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()
  }
}

在 DOM 更改之前更改路线并且在路线本身之外更改路线时触发事件？

Fire event when changing route before DOM changes and outside the route itself?

vue.js

vue-router

vue-events