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

中详细了解此警卫

vue-router - 如何在beforeRouteEnter

1 个答案: