Monday, 2 May 2022

Detect navigation abort/cancel in a guard

Currently it's expected that the navigation is confirmed, so both beforeEach and afterEach global guards are triggered. showSpinner and hideSpinner are supposed to be called in pair on each navigation.

router.beforeEach((to, from, next) => {
  showSpinner();
  next();
}

router.afterEach((to, from) => {
  // This line can be never called
  hideSpinner();
});

From what I see, navigation result isn't available through next in guards.

Then in another place the navigation is cancelled, so it stays on the previous route, and afterEach is not triggered (the same likely applies to navigation abort):

beforeRouteEnter() {
  ...
  next(false);
}

The result is that afterEach and hideSpinner not being triggered.

This happens with Vue Router 3.4.9 and Vue 2.6.

How can this be solved?



from Detect navigation abort/cancel in a guard

No comments:

Post a Comment