global onBeforeRouteLeave

[dvh91]

Im facing a need to have global onBeforeRouteLeave and wondering if there's a workaround with current api.
the use case is:

1. route A trigger n api requests (using tanstack query)
2. clicking on route B link (the route is lazy loaded)
3. browser is pending on past requests before fetching the route chunk js. in localhost http 1 its worst but also http 2 has its limits.
4. api requests can't get the abort signal triggered until the route is unmounted and the queries are inactive

I've tried to use router.beforeEach guard

router.beforeEach(async (from, to, next) => {
  await client.cancelQueries({ fetchStatus: 'fetching' })
  next()
})

but it seems that it also cancel queries from the route B somehow.

when using onBeforeRouteLeave on route A component it looks like it's working properly.

onBeforeRouteLeave(() => {
  client.cancelQueries({
    fetchStatus: 'fetching',
  })
})

I'm trying to find a way to hook globally to the same lifecycle step as onBeforeRouteLeave

[posva]

The global equivalent is a router.beforeResolve() (similar to router.beforeEach()), but you need to write the "leaving" condition (aka what does leaving mean) yourself by manually comparing the two locations and more probably, their matched properties. It's up to you to decide if leaving means that to.matched and from.matched have no common route records or something else.
That being said, if you want to cancel a query, you will probably have to provide another filter than just fetching. That will again be up to you, depending on the keys you have and you will likely need to implement some mechanism to attach current fetching queries to the current route, maybe with a watcher or similar. Note you can attach properties to a route location .meta property