每次加载路线时，我的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？