keep-alive and beforeRouteLeave: pending request cancellation interoperability
0 reputation · 14 Sept 2021, 20:48 UTC
Vue 3's keep-alive component and the beforeRouteLeave navigation guard each manage lifecycle events that influence pending async operations. When a route transition occurs, beforeRouteLeave can cancel in-flight requests, but keep-alive's cached state may rehydrate the component after navigation, potentially re-triggering the same async call. The reactivity system does not inherently distinguish between a legitimate retry and a duplicate write caused by lifecycle overlap. This creates an interoperability question: how to coordinate cancellation and caching so that a retry initiated after navigation does not produce duplicate network requests. Version considerations include Vue 3's composition API onBeforeUnmount behavior and axios interceptor flag persistence across keep-alive activated hooks.
How does keep-alive's activated hook interact with beforeRouteLeave's cancellation window when a retry is pending? Can a retry suppression flag set in an axios interceptor survive keep-alive unmount and remount without race conditions? What pattern ensures a single async write on component re-entry after navigation guard cancellation?