在 DOM 更改之前使用 vue-router 更改路由时触发事件？

Question

我是 Vue 的新手，希望这不会是一个非常愚蠢的问题:)

beforeDestroy 在 DOM 结构发生变化后被解雇。

我试过使用 beforeUpdate 和 updated 事件，但 none 似乎在 DOM 更改之前触发。

在线复现：https://jsfiddle.net/p2c3b10t/18/（查看控制台）

Answer 1

用Vue Router, instead of relying on the lifecycle hooks, use navigation guards. These guards hook into the route navigation process and can be either global, per-route, or in-component处理路由时。

在这种特殊情况下，我们正在寻找 beforeRouteLeave 组件内防护。

beforeRouteLeave (to, from, next) {
  // called when the route that renders this component is about to
  // be navigated away from.
  // has access to `this` component instance.
}

在这个守卫中，我们可以访问to和from，并调用next。

export type NavigationGuard = (
  to: Route,
  from: Route,
  next: (to?: RawLocation | false | ((vm: Vue) => any) | void) => void
) => any

to 是导航到的目标 Route。
from是当前正在离开的路线。
next是解析hook必须调用的函数

执行此守卫内部的逻辑后，必须调用 next() 来解析钩子。

在 DOM 更改之前使用 vue-router 更改路由时触发事件？

Fire event when changing route with vue-router before DOM changes?

vue.js

vue-router

vue-events

Revised JSFiddle