beforeRouteLeave，vue-router 的奇怪之处答案

【问题标题】：Weirdness with beforeRouteLeave, vue-routerbeforeRouteLeave，vue-router 的奇怪之处
【发布时间】：2017-12-14 17:09:45
【问题描述】：

我希望有人能给我一些想法，让我知道我的导航菜单在使用 vue-router 的特定路线上可能会发生什么。不可能创建一个 jFiddle 来重现它，所以我希望描述就足够了。

我有一个标准的 vue-cli 生成设置，在我的 App.vue 文件中有一个 router.js 和一个导航菜单，而且大部分时间都可以正常工作。但是，导航到一条特定路线后，菜单变得完全没有响应 - 即，选择另一个菜单项什么都不做，它不会带我到另一条路线。

我能想到的唯一可以解释这一点的就是我使用的“beforeRouteLeave”导航守卫，例如，如果没有调用“next”。事实上，一旦我进行了一些日志记录，它就会显示出对我来说完全无法解释的行为。这是我对相关组件的“beforeRouteLeave”：

    beforeRouteLeave (to, from, next) {
      console.log("Running beforeRouteLeave");
      if (this.editMode && this.isDirty(this.sale)) {
        console.log("beforeRouteLeave: showing leave confirmation");
        bootbox.confirm("Leave without saving?", (result) => {
          if (result) {
            next();
          }
        });
      } else {
        console.log("beforeRouteLeave: going to next()");
        next();
      }
   }

当导航失败时，控制台只显示“Running beforeRouteLeave”消息。但这对我来说很神秘，因为我之后立即进行了 if/else 测试，这两个分支都涉及将消息打印到控制台。它肯定必须打印“beforeRouteLeave：显示离开确认”或“beforeRouteLeave：进入下一个（）”。但它既不打印，而且路线保持不变（我认为实际上已被中止）。会发生什么？

【问题讨论】：

您在控制台中看到任何错误吗？
不，控制台中没有错误。奇怪的是，就好像代码在最初的“Running beforeRouteLeave”控制台消息之后停止了执行。正如我所说，我不明白这是怎么可能的，因为 if/else 的一个分支肯定必须执行。
问题肯定与'beforeRouteLeave'有关。我试过删除 beforeRouteLeave 函数，一切都正常运行。不过，我确实需要该功能。
函数中的this是什么，尝试记录一下，可能不是你期望的this
this 是组件。但无论this 是什么，if/else 必须的一个分支都必须执行，但控制台中什么也没有出现，也没有导航发生——这就是谜。

标签： vue.js vue-router

【解决方案1】：

问题解决了！我运行了一个“npm update”来将所有包（vue、vue-router 等）更新到最新版本，现在一切正常。所以很明显旧版本中有一些错误。仍然对它如何无法执行某些代码感到困惑，但我现在可以继续。

【讨论】：