vue.js - vue-router - 如何在 beforeRouteEnter 中中止路由更改

Question

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

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);
    }
  });
},

这个想法是我测试 Prop 是否存在，如果它无效，则返回(或以其他方式中止路线更改)。从控制台日志中，我可以看到正在发生的情况是，组件实例实际上正在创建，大概是由于调用了回调，并在 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中阅读有关此守卫的更多信息。