在视图中解析 beforeRouteLeave 时阻止路由点击？答案

【问题标题】：Blocking route clicks while resolving beforeRouteLeave in a view?在视图中解析 beforeRouteLeave 时阻止路由点击？
【发布时间】：2020-09-04 19:37:33
【问题描述】：

如果我单击导航按钮离开带有下面代码的视图，它工作正常。路由器等待直到代码被解析，然后移动到下一个路由视图页面。

async beforeRouteLeave(_to: object, _from: object, _next: Function) {
    await this.resolveStuff();
    _next();
}

但是，如果我继续单击导航按钮（向按钮发送垃圾邮件），上述相同的 beforeRouteLeave 会不断被触发，而它仍然从第一次单击开始解决问题。当 promise 最终解决时，路由器挂起并且不进入下一页。我希望路由器等到 beforeRouteLeave 完成后再进行更多导航。

我正在使用 Vue 路由器 4 候选版本。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

也许创建一个在“beforeRouteLeave”之前设置为 true 并在解决后设置为 false 的标志，从而防止触发第二个“beforeRouteLeave”？

[编辑]

示例：

var isLoading = false


.
.
.


async beforeRouteLeave(_to: object, _from: object, _next: Function) {
   if(isLoading){
      return false // do nothing exit function
   } else {
      isLoading = true // set to true to prevent multiple executions 
   }
   await this.resolveStuff();

   isLoading = false // All done, from now on we can invoke "beforeRouteLeave" again

    _next();
}

【讨论】：

我试过这个。首先它抱怨 “next”回调从未在“beforeRouteLeave”中调用。添加_next(false)后，路由器还是挂了。

【解决方案2】：

在 beforeEach 路由钩子中有效地阻止了路由点击：

router.beforeEach(to, from, next) => { if (routerPaused) next(false); });

【讨论】：