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

Question

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

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

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

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

Answer 1

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

В данном конкретном случае мы ищем 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