fix(router): reusing checks params

core/src/components/nav/nav.tsx

@@ -200,10 +200,12 @@ export class NavControllerBase implements NavOutlet {
   @Method()
   setRouteId(id: string, params: any = {}, direction: number): Promise<RouteWrite> {
     const active = this.getActive();
-    if (active && active.component === id) {
+
+    if (active && active.matches(id, params)) {
       return Promise.resolve({changed: false, element: active.element});
     }
-    const viewController = this._views.find(v => v.component === id) || id;
+
+    const viewController = this._views.find(v => v.matches(id, params));
 
     let resolve: (result: RouteWrite) => void;
     const promise = new Promise<RouteWrite>((r) => resolve = r);
@@ -220,17 +222,14 @@ export class NavControllerBase implements NavOutlet {
         return p;
       }
     };
-
-    if (direction === 1) {
-      this.push(viewController, params, commonOpts);
+    if (viewController) {
+      this.popTo(viewController, {...commonOpts, direction: NavDirection.back});
+    } else if (direction === 1) {
+      this.push(id, params, commonOpts);
     } else if (direction === -1) {
-      this.setRoot(id, params, {
-        ...commonOpts,
-        direction: NavDirection.back,
-        animate: true
-      });
+      this.setRoot(id, params, {...commonOpts, direction: NavDirection.back, animate: true});
     } else {
-      this.setRoot(viewController, params, commonOpts);
+      this.setRoot(id, params, commonOpts);
     }
     return promise;
   }

core/src/components/nav/view-controller.ts

@@ -75,6 +75,36 @@ export class ViewController {
     this._leavingOpts = opts;
   }
 
+  matches(id: string, params: any): boolean {
+    if (this.component !== id) {
+      return false;
+    }
+    const currentParams = this.data;
+    const null1 = (currentParams == null);
+    const null2 = (params == null);
+    if (null1 !== null2) {
+      return false;
+    }
+    if (null1 && null2) {
+      return true;
+    }
+
+    const keysA = Object.keys(currentParams);
+    const keysB = Object.keys(params);
+    if (keysA.length !== keysB.length) {
+      return false;
+    }
+
+    // Test for A's keys different from B.
+    for (let i = 0; i < keysA.length; i++) {
+      const key = keysA[i];
+      if (currentParams[key] !== params[key]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
   /**
    * @hidden
    * DOM WRITE

core/src/components/router/test/basic/index.html

@@ -17,7 +17,10 @@
         </ion-header>
         <ion-content>
           page one
-          <a href='#/two/second-page'>Ir a la page 2</a>
+          <p><a href='#/two/second-page'>Go to page 2</a></p>
+          <p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
+          <p><a href='#/two/three/something'>Go to page 3 (something)</a></p>
+
         </ion-content>`;
       }
     }
@@ -31,7 +34,8 @@
           </ion-toolbar>
         </ion-header>
         <ion-content>
-          page two
+          <p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
+          <p><a href='#/two/three/hello'>Go to page 3 (hello)</a></p>
         </ion-content>`;
       }
     }
@@ -41,11 +45,14 @@
         this.innerHTML = `
         <ion-header>
           <ion-toolbar>
-            <ion-title>Page 3</ion-title>
+            <ion-title>Page 3 ${this.prop1}</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content>
-          page tres
+          <p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
+          <p><a href='#/two/three/hello'>Go to page 3 (hello)</a></p>
+          <p><a href='#/two/second-page'>Go to page 2</a></p>
+          <p><a href='#/two/'>Go to page 1</a></p>
         </ion-content>`;
       }
     }
@@ -111,7 +118,7 @@
       <ion-route url="/two" component="tab-two">
         <ion-route component="page-one"> </ion-route>
         <ion-route url="/second-page" component="page-two"> </ion-route>
-        <ion-route url="/three-page" component="page-three"> </ion-route>
+        <ion-route url="/three/:prop1" component="page-three"> </ion-route>
       </ion-route>
 
       <ion-route url="/three" component="tab3"> </ion-route>