fix(vue-router): clear navigation info when a guard aborts navigation

packages/vue-router/src/router.ts

@@ -29,6 +29,7 @@ export const createIonRouter = (
     direction: undefined,
     action: undefined,
     delta: undefined,
+    to: undefined,
   };
 
   /**
@@ -46,7 +47,59 @@ export const createIonRouter = (
       _: RouteLocationNormalized,
       failure?: NavigationFailure | void
     ) => {
-      if (failure) return;
+      if (failure) {
+        /**
+         * State staged for a navigation that failed describes something that
+         * did not happen. handleHistoryChange normally consumes it, but it does
+         * not run when the navigation fails, so it has to be cleared here or
+         * the next navigation picks it up instead.
+         *
+         * A delta is only staged for a history navigation, and a stale one
+         * makes the next navigation look like traversal, which stops the
+         * incoming route from being added. Route params are staged by any of
+         * the navigation helpers, and a stale set carries a pop action into
+         * whatever runs next. Only handleNavigateBack stages the previous
+         * route's id alongside them.
+         *
+         * Only clear state that belongs to this navigation, and check the two
+         * slots separately. Another navigation can replace this one and stage
+         * its own state first, in which case clearing would strip that state
+         * from the navigation still running.
+         *
+         * The back and forward helpers cannot record a target, so params they
+         * staged fall back to the delta's target. Those are the helpers that
+         * hand off to history, so a delta is always recorded for them.
+         *
+         * This only covers navigations that fail. A guard that returns a
+         * location redirects rather than fails, so afterEach is never called
+         * for the original navigation and its staged state reaches the redirect
+         * target instead.
+         */
+        const deltaIsForThisNavigation =
+          currentNavigationInfo.to === undefined ||
+          currentNavigationInfo.to === to.fullPath;
+
+        const paramsAreForThisNavigation =
+          incomingRouteParamsTo === undefined
+            ? deltaIsForThisNavigation
+            : incomingRouteParamsTo === to.fullPath;
+
+        if (deltaIsForThisNavigation) {
+          currentNavigationInfo = {
+            direction: undefined,
+            action: undefined,
+            delta: undefined,
+            to: undefined,
+          };
+        }
+
+        if (paramsAreForThisNavigation) {
+          incomingRouteParams = undefined;
+          incomingRouteParamsTo = undefined;
+        }
+
+        return;
+      }
 
       const { direction, action, delta } = currentNavigationInfo;
 
@@ -68,6 +121,7 @@ export const createIonRouter = (
         direction: undefined,
         action: undefined,
         delta: undefined,
+        to: undefined,
       };
     }
   );
@@ -89,6 +143,13 @@ export const createIonRouter = (
    * Cleared once `handleHistoryChange` has consumed them.
    */
   let incomingRouteParams: RouteParams | undefined;
+  /**
+   * The location the staged params were meant for, when the helper that staged
+   * them knew it. Kept beside the params rather than on them so it is never
+   * spread onto a RouteInfo. Left undefined by the back and forward helpers,
+   * which hand off to history and cannot know the target yet.
+   */
+  let incomingRouteParamsTo: string | undefined;
 
   const historyChangeListeners: any[] = [];
 
@@ -101,7 +162,7 @@ export const createIonRouter = (
     });
   }
 
-  opts.history.listen((_: any, _x: any, info: any) => {
+  opts.history.listen((to: any, _x: any, info: any) => {
     /**
      * history.listen only fires on certain
      * event such as when the user clicks the
@@ -123,6 +184,12 @@ export const createIonRouter = (
        */
       action: info.type === "pop" && info.delta >= 1 ? "push" : info.type,
       direction: info.direction === "" ? "forward" : info.direction,
+
+      /**
+       * Recorded so that a failed navigation can tell whether this
+       * information is its own before clearing it.
+       */
+      to,
     };
   });
 
@@ -223,6 +290,7 @@ export const createIonRouter = (
              * letting them leak into the next navigation.
              */
             incomingRouteParams = undefined;
+            incomingRouteParamsTo = undefined;
           }
         }
       } else if (defaultHref) {
@@ -240,7 +308,13 @@ export const createIonRouter = (
     routerAnimation?: AnimationBuilder,
     tab?: string
   ) => {
-    setIncomingRouteParams(routerAction, routerDirection, routerAnimation, tab);
+    setIncomingRouteParams(
+      routerAction,
+      routerDirection,
+      routerAnimation,
+      tab,
+      path
+    );
 
     if (routerAction === "push") {
       router.push(path);
@@ -586,6 +660,7 @@ export const createIonRouter = (
       currentRouteInfo = routeInfo;
     }
     incomingRouteParams = undefined;
+    incomingRouteParamsTo = undefined;
     historyChangeListeners.forEach((cb) => cb(currentRouteInfo));
   };
 
@@ -601,7 +676,13 @@ export const createIonRouter = (
   const navigate = (navigationOptions: ExternalNavigationOptions) => {
     const { routerAnimation, routerDirection, routerLink } = navigationOptions;
 
-    setIncomingRouteParams("push", routerDirection, routerAnimation);
+    setIncomingRouteParams(
+      "push",
+      routerDirection,
+      routerAnimation,
+      undefined,
+      routerLink
+    );
 
     router.push(routerLink);
   };
@@ -790,14 +871,17 @@ export const createIonRouter = (
     routerAction: RouteAction = "push",
     routerDirection: RouteDirection = "forward",
     routerAnimation?: AnimationBuilder,
-    tab?: string
+    tab?: string,
+    to?: RouteLocationRaw
   ) => {
     incomingRouteParams = {
       routerAction,
       routerDirection,
       routerAnimation,
       tab,
     };
+
+    incomingRouteParamsTo = to ? router.resolve(to).fullPath : undefined;
   };
 
   const goBack = (routerAnimation?: AnimationBuilder) => {

packages/vue-router/src/types.ts

@@ -91,4 +91,10 @@ export interface NavigationInformation {
   action?: RouteAction;
   direction?: RouteDirection;
   delta?: number;
+  /**
+   * The location the browser moved to when this information was staged. Used to
+   * tell whether the information belongs to a particular navigation, since a
+   * second history navigation can stage its own before the first one settles.
+   */
+  to?: string;
 }