fix(vue): only remount with delta values

Author: liamdebeasi

packages/vue-router/src/router.ts

@@ -258,6 +258,7 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
       }
 
       routeInfo.position = currentHistoryPosition;
+      routeInfo.delta = delta;
       const historySize = locationHistory.size();
       const historyDiff = currentHistoryPosition - initialHistoryPosition;
 

packages/vue-router/src/types.ts

@@ -27,6 +27,7 @@ export interface RouteInfo {
   pushedByRoute?: string;
   tab?: string;
   position?: number;
+  delta?: number;
 }
 
 export interface RouteParams {

packages/vue-router/src/viewStacks.ts

@@ -203,15 +203,34 @@ export const createViewStacks = (router: Router) => {
    * developers to step forward over multiple views.
    * The intermediary views need to be remounted so that
    * swipe to go back works properly.
+   * We need to account for the delta value here too because
+   * we do not want to remount an unrelated view.
+   * Example:
+   * /home --> /page2 --> router.back() --> /page3
+   * Going to /page3 would remount /page2 since we do
+   * not prune /page2 from the stack. However, /page2
+   * needs to remain in the stack.
+   * Example:
+   * /home --> /page2 --> /page3 --> router.go(-2) --> router.go(2)
+   * We would end up on /page3, but users need to be able to swipe
+   * to go back to /page2 and /home, so we need both pages mounted
+   * in the DOM.
    */
-  const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem) => {
+  const mountIntermediaryViews = (outletId: number, enteringViewItem: ViewItem, leavingViewItem: ViewItem, delta: number = 1) => {
     const viewStack = viewStacks[outletId];
     if (!viewStack) return;
 
     const { enteringIndex: endIndex, leavingIndex: startIndex } = findViewIndex(viewStack, enteringViewItem, leavingViewItem);
+    let mountDiff = delta - 1;
 
     for (let i = startIndex + 1; i < endIndex; i++) {
       viewStack[i].mount = true;
+
+      mountDiff -= 1;
+
+      if (mountDiff === 0) {
+        return;
+      }
     }
   }
 

packages/vue/src/components/IonRouterOutlet.ts

@@ -202,7 +202,7 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
 
     const handlePageTransition = async () => {
       const routeInfo = ionRouter.getCurrentRouteInfo();
-      const { routerDirection, routerAction, routerAnimation, prevRouteLastPathname } = routeInfo;
+      const { routerDirection, routerAction, routerAnimation, prevRouteLastPathname, delta } = routeInfo;
 
       const enteringViewItem = viewStacks.findViewItemByRouteInfo(routeInfo, id);
       let leavingViewItem = viewStacks.findLeavingViewItemByRouteInfo(routeInfo, id);
@@ -277,7 +277,7 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
             viewStacks.unmountLeavingViews(id, enteringViewItem, leavingViewItem);
           }
         } else {
-          viewStacks.mountIntermediaryViews(id, enteringViewItem, leavingViewItem);
+          viewStacks.mountIntermediaryViews(id, enteringViewItem, leavingViewItem, delta);
         }
 
         fireLifecycle(leavingViewItem.vueComponent, leavingViewItem.vueComponentRef, LIFECYCLE_DID_LEAVE);