Как я могу асинхронно ожидать события в дочернем компоненте?Вью-маршрутизатор

Question

Я хочу защитить пользователя от перехода от несохраненной формы с помощью пользовательского модального и vue-маршрутизатора.

Это возможно с окном оповещения собственного браузера

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!') 
    if (answer) {
      next();
    } else { 
      next(false);
    }
}

, но какможно подождать события от пользовательского дочернего модального компонента?

async beforeRouteLeave(to, from, next) {
    const a = await this.showModal();

    if (a) {
      next();
    } else {
      next(false);
    }
}

Answer 1

beforeRouteLeave не учитывает обещание, обещание, которое возвращает функция async, игнорируется.

next - это общее имя для обратного вызова в экосистеме JavaScript.Как показывает документация , он принимает аргумент.Должно быть:

async beforeRouteLeave(to, from, next) {
    const a = await this.showModal();

    if (a)
      next(); 
    else
      next(false); 
}

Answer 2

Работает, но не уверен, что это лучшее решение:

Сначала сохраните функцию next в качестве объекта данных

beforeRouteLeave (to, from, next) {
   if (this.$store.state.product.unsavedChanges) {
       this.nextObj = next; // save next function as a data object  
       this.showModal = true;
    } else {
        next();
    }
}

, затем в своем модальном компоненте создайтесобытие и обработайте его на родительском компоненте

<modal @continueOrCancel="continueOrCancel" />

Запустите функцию на родительском компоненте

methods: {
  continueOrCancel(e) {
     if (e == "continue") {
        this.nextObj(); // works.
     } else {
        this.nextObj(false); // does not work. Only logs the next function. Also tried with string "false", and 0 which produces the same result. 
        this.showModal = false; // continue, but what about route lifecycle ??
     }
  }
}