Vue.js vue路由器-如何在BeforeRouteCenter中中止路由更改

我在使用vue.js/vue-router的beforeRouteEnter导航卫士中看到了一些我不理解的行为。我从文档中了解到，该卫士“无权访问

此

组件实例”，但如果您需要访问组件实例，可以通过回调进行访问。我这样做是因为如果没有定义一个道具（通常是因为用户单击“前进”按钮），我想中止路线更改。这就是我所拥有的：

beforeRouteEnter(to, from, next) {
  console.log("ProductDetail: routing from = "+from.path+" to "+to.path);

  next(vm => {
    if (!vm.product) {
      console.log("Product empty: routing back one page");
      vm.$router.go(-1);
    }
  });
},

我的想法是测试道具是否存在，如果道具无效，则返回（或者中止路线更改）。不过，从控制台日志中，我可以看到，实际上正在创建组件实例，这可能是调用回调的结果，并在

vm.$router.go（-1）

启动并将用户带回上一屏幕之前抛出了一系列错误

那么，如果没有一个必要的条件，如果在我可以测试的时候已经太迟了，我能做些什么来真正阻止路由更改完成呢？

您可以尝试下面的代码

beforeRouteEnter(to, from, next) {
  // Your code
  next(vm => {
    if (!vm.product) {
      console.log("Product empty: routing back one page");
      next(from)
    }
  });
}

---

你可以在

中阅读更多关于此防护的信息，这与我现在所做的几乎相同（并且会导致相同的错误）。组件实例显然是在

if（！vm.product）

测试完成之前创建的，这可能是由于调用了

下一步（vm=>

）。您是否尝试

vm.$props.product

（prop中的产品）或

vm.$data.product

（数据中的产品），其中给出了：“TypeError:vm.$props未定义”我现在相信我不能用beforeRouteEnter做我想做的事情。这是来自文档：“当导航被确认时将调用回调”。现在已经太晚了。因此，如果数据无效，我需要找到其他方法中止路由更改。实际上，这只是给了我一个想法。我已经包装了

next（vm=>{…}）；

在try/catch中阻塞，并将

next（from）

放在catch块中。因此，如果有错误，它应该重定向。我将看看这是如何工作的。