javascript - 如何异步等待子组件中的事件？ Vue-路由器

Question

我想保护用户避免使用自定义模式和 vue-router 离开未保存的表单。

这可以通过 native 浏览器警报框实现

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 无法识别 Promise，async 函数返回的 Promise 会被忽略。

next 是 JavaScript 生态系统中回调的常用名称。如the documentation显示，它接受一个参数。应该是:

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

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