如何使BeforeRouteEnter中的next（false）阻止Vue-Router导航到该路由？

Question

我非常希望实现一个导航卫士，该卫士将根据路线参数中提供的ID阻止用户访问不存在的项目页面。

在Vue-Router指南中说：

  

next（false）：中止当前导航。如果更改了浏览器URL（由用户手动或通过后退按钮更改），它将被重置为from路由的URL。

在我的组件中，使用next（false）不会阻止路线更改或组件渲染。它甚至都不会像文档中所承诺的那样向后导航。

beforeRouteEnter(to, from, next) {
    next(false)
    ajaxcall$.subscribe(data => next(vm => vm.setData(data)))

我希望明显的next(false)能够正常工作，并阻止呈现组件和路径，但不会。进行ajax调用并设置数据。

Answer 1

“确保在任何给定的通过导航保护的过程中，下一个函数都被精确地调用一次。” Vue Router - Global Before Guards

您有多个ajaxcall$.subscribe()通话。

此外，您的next(vm => vm.setData(data))最有可能是一种异步方法，因此当它调用await时，导航很可能已经发生。

在调用next()之前，应使用{{1}}确保来自ajax的信息可用。

用API调用减慢每个页面的转换可能不是一个好主意，但这是一个不同的问题...