如何使 BeforeRouteEnter 中的 next(false) 阻止 Vue-Router 导航到路由？

Posted 2023-02-22

【中文标题】如何使 BeforeRouteEnter 中的 next(false) 阻止 Vue-Router 导航到路由？

【英文标题】：How to make next(false) in BeforeRouteEnter prevent Vue-Router from navigating to the route?

【发布时间】：2019-09-06 22:45:29

【问题描述】：

我迫切希望实现一个导航守卫，如果项目不存在，它会根据路由参数中提供的 ID 阻止用户访问项目页面。

在 Vue-Router 指南中说：

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

但在我的组件中，使用 next(false) 不会阻止路由更改或组件渲染。它甚至不会像文档中承诺的那样导航回来。

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

我本来希望明显的next(false) 能够工作并阻止组件和路由呈现，但没有。 ajax 调用并设置数据。

【问题讨论】：

您应该添加一个return 语句以避免执行以下表达式（即return next(false)）。

我认为next 是一个回调。我不认为回调应该是返回值。它会破坏事物。

返回哪个值（或者是否返回一个值）并不重要。关键是你应该在回调调用之后立即return。

【参考方案1】：

“确保在通过导航守卫的任何给定传递中，下一个函数只被调用一次。” Vue Router - Global Before Guards

您有多个next() 电话。

另外，您的ajaxcall$.subscribe() 很可能是一个异步方法，所以当它调用next(vm => vm.setData(data)) 时，导航很可能已经发生了。

在调用next()之前，您应该使用await确保来自ajax的信息可用。

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