vue-router - 如何中止 beforeRouteEnter 中的路由更改

Question

我在使用 vue.js/vue-router 的 beforeRouteEnter 导航守卫中看到一些我不理解的行为。我从文档中了解到，这个守卫“无法访问this 组件实例”，但是如果您需要访问组件实例，您可以通过回调来实现。我这样做是因为如果其中一个道具尚未定义（通常是因为用户单击前进按钮），我想中止路线更改。所以这就是我所拥有的：

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) 开始并将用户带回到上一个屏幕。

那么，如果有一个必要条件不存在，如果到我可以测试它的时候为时已晚，我该怎么做才能真正阻止路线更改完成？

Answer 1

你可以试试这个代码

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

你可以在https://router.vuejs.org/en/advanced/navigation-guards.html阅读更多关于这个守卫的信息