fix(vue): going back with query params now goes to correct view (#22350)

resolves #22324
ionic-team · Oct 21, 2020 · 561a4ac · 561a4ac
1 parent bcef804
commit 561a4ac
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 4 deletions.
diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts
@@ -11,14 +11,20 @@ import {
   RouteParams,
   RouteAction,
   RouteDirection,
-  IonicVueRouterOptions
+  IonicVueRouterOptions,
+  NavigationInformation
 } from './types';
 import { AnimationBuilder } from '@ionic/core';
 
 export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) => {
+  let currentNavigationInfo: NavigationInformation = { direction: undefined, action: undefined };
 
   router.beforeEach((to: RouteLocationNormalized, _: RouteLocationNormalized, next: NavigationGuardNext) => {
-    handleHistoryChange(to);
+    const { direction, action } = currentNavigationInfo;
+    handleHistoryChange(to, action, direction);
+
+    currentNavigationInfo = { direction: undefined, action: undefined };
+
     next();
   });
 
@@ -39,8 +45,23 @@ export const createIonRouter = (opts: IonicVueRouterOptions, router: Router) =>
     })
   }
 
-  //   NavigationCallback
-  opts.history.listen((to: any, _: any, info: any) => handleHistoryChange({ path: to }, info.type, info.direction));
+  opts.history.listen((_: any, _x: any, info: any) => {
+    /**
+     * history.listen only fires on certain
+     * event such as when the user clicks the
+     * browser back button. It also gives us
+     * additional information as to the type
+     * of navigation (forward, backward, etc).
+     *
+     * We can use this to better handle the
+     * `handleHistoryChange` call in
+     * router.beforeEach
+     */
+    currentNavigationInfo = {
+      action: info.type,
+      direction: info.direction === '' ? 'forward' : info.direction
+    };
+  });
 
   const handleNavigateBack = (defaultHref?: string, routerAnimation?: AnimationBuilder) => {
     // todo grab default back button href from config

diff --git a/packages/vue-router/src/types.ts b/packages/vue-router/src/types.ts
@@ -53,3 +53,8 @@ export interface ExternalNavigationOptions {
   routerDirection?: RouteDirection;
   routerAnimation?: AnimationBuilder;
 }
+
+export interface NavigationInformation {
+  action?: RouteAction;
+  direction?: RouteDirection;
+}
diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts
@@ -38,6 +38,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/routing/child',
     component: () => import('@/views/RoutingChild.vue')
   },
+  {
+    path: '/routing/item/:id/view',
+    component: () => import('@/views/RoutingParameter.vue')
+  },
   {
     path: '/navigation',
     component: () => import('@/views/Navigation.vue')

diff --git a/packages/vue/test-app/src/views/Routing.vue b/packages/vue/test-app/src/views/Routing.vue
@@ -23,6 +23,10 @@
       <ion-item button router-link="/routing/child" id="child">
         <ion-label>Go to Child Page</ion-label>
       </ion-item>
+
+      <ion-item button router-link="/routing/item/123/view" id="item">
+        <ion-label>Go to Parameterized Route</ion-label>
+      </ion-item>
     </ion-content>
   </ion-page>
 </template>

diff --git a/packages/vue/test-app/src/views/RoutingParameter.vue b/packages/vue/test-app/src/views/RoutingParameter.vue
@@ -0,0 +1,49 @@
+<template>
+  <ion-page data-pageid="routingparameter">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Routing Parameter</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Routing Parameter</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <div class="ion-padding">
+        Routing Parameter Page: {{ $route.params.id }}
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonBackButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar
+  }
+});
+</script>
diff --git a/packages/vue/test-app/tests/e2e/specs/routing.js b/packages/vue/test-app/tests/e2e/specs/routing.js
@@ -46,6 +46,22 @@ describe('Routing', () => {
     cy.ionPageVisible('home');
     cy.ionPageDoesNotExist('routing');
     cy.ionPageDoesNotExist('routingchild')
+  });
+
+  // Verifies fix for https://github.com/ionic-team/ionic-framework/issues/22324
+  it('should show correct view when navigating back from parameterized page to query string page', () => {
+    cy.visit('http://localhost:8080');
+    cy.get('#routing').click();
+    cy.get('#route-params').click();
+    cy.get('#item').click();
+
+    cy.ionPageVisible('routingparameter');
+    cy.ionPageHidden('routing');
+
+    cy.ionBackClick('routingparameter');
+
+    cy.ionPageDoesNotExist('routingparameter');
+    cy.ionPageVisible('routing');
   })
 });