Возникло событие при изменении маршрута с помощью vue-router до изменения DOM?

Question

Я совсем новичок в Vue, надеюсь, это не будет очень глупым вопросом:)

beforeDestroy увольняется после изменения структуры DOM.

Я пытался использовать beforeUpdate а также updated события, но ни один, кажется, не срабатывает до изменения DOM.

Воспроизведение онлайн: https://jsfiddle.net/p2c3b10t/18/ (проверьте консоль)

Answer 1

При работе с маршрутизацией с помощью Vue Router вместо использования ловушек жизненного цикла используйте средства навигации. Эти охранники подключаются к процессу навигации по маршруту и ​​могут быть глобальными, для каждого маршрута или компонентными.

В данном конкретном случае мы ищем 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 целевой маршрут, к которому осуществляется навигация.

• from является текущим маршрутом, с которого осуществляется навигация.

• next это функция, которая должна быть вызвана для разрешения хука

После выполнения логики внутри этого охранника, нужно позвонить next() решить крюк.

---

Пересмотренный JSFiddle