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

Question

我对 Vue 很陌生，希望这不会是一个非常愚蠢的问题 :)

DOM 结构更改后beforeDestroy触发。

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

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

Answer 1

当使用Vue Router处理路由时，不要依赖生命周期钩子，而是使用导航守卫。这些守卫挂钩到路由导航过程，可以是global、per-route或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.
}

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

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

• to是导航到的目标路线。

• from是当前导航离开的路线。

• next是解决钩子必须调用的函数

在执行完这个守卫内部的逻辑之后，必须调用next()来解决钩子。

---

修改后的 JSFiddle