onBeforeRouteLeave is called twice

[realainov]

Reproduction

https://codesandbox.io/p/sandbox/keen-thunder-fcf6rv

Steps to reproduce the bug

Version: 4.3.0

1. Click button "Set global query".
2. Click link "About".
3. Click link "Home".

Expected behavior

onBeforeRouteLeave called once = see alert only once. The expected behavior can be reproduced if you skip step 1 in the previous block.

Actual behavior

onBeforeRouteLeave called twice = see alert twice.

Additional information

I will describe the scenario for which this logic was required.

There is a need to have a flag to configure the application logic via query, while clicking on the links it should not be reset. In order not to have to specify the logic of passing the query field during navigation every time, the beforeEach hook was used, which automatically substitutes this value into the next route if it was in the previous one.

However, undesirable behavior occurs if one of the components uses onBeforeRouteLeave, which is called twice.

[posva]

Can you create a repro using the playground from the new issue form nd ensure it’s using version 4.6.2?

[realainov]

Already update playground version to 4.6.2, result is the same.

Repro from Vue Playground.

[posva]

Thanks! I think You see two executions because one of your beforeEach guards triggers a new navigation.

[realainov]

I don't have any ideas yet on how to solve the current problem with the available funds.

I've tried this method:

router.afterEach((to, from, failure) => {
  if (isNavigationFailure(failure)) {
    return;
  }

  if (!to.query.mode && from.query.mode) {
    router.replace({
      ...to,
      query: {
        ...to.query,
        mode: from.query.mode,
      },
    });
  }
});

This corrects the described behavior, but adds another one. After the initial navigation has been completed, the user sees /home in the url, then changes the url to /home?mode=full. With beforeEach, of course, it is replaced immediately to /home?mode=full.

If you can help me to choose right solution, I will be immensely grateful.

Either that, or it really should be solved by the library.

[posva]

Your current approach is the correct one. You can also filter the leave guard based on the presence of the query param