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

这个想法是，我测试这个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中阅读更多关于这个守卫的信息