导航取消时的Vue-Router回调

Question

每当加载路线时，我的Vue应用程序都会显示一个加载屏幕，因为代码拆分路线有时需要花费几秒钟来加载。它使用全局beforeEach钩子执行此操作。

// App component
this.$router.beforeEach(() => { this.loading = true })
this.$router.afterEach(() => { this.loading = false })
this.$router.onError(() => { this.loading = false })

问题是，如果我在路由定义（如beforeEnter）上创建了一个防护，调用next(false)将不会触发afterEach或onError，因此它将使应用永远处于加载状态。

我尝试的一件事是使用beforeResolve而不是beforeEach。由于我的beforeEnter路由选择器是异步的，因此无法解决，并且我想在执行时显示加载屏幕。

另一种可能的解决方案是始终调用next(error)，而不是next(false)使onError钩被触发。但是，当有人尝试按预期使用导航卫士API时，这是一个等待稍后发生的错误。

最后一种选择是将this.loading逻辑隔离到全局可访问的类或事件总线中，并让路由保护程序根据情况进行处理。

但是我更喜欢设置它，然后忘记它。取消导航时是否有全局钩子被调用？afterEach在这种情况下为什么不叫？