fix(vue): pass router-link value to href to properly render clickable…

… elements (#446)

packages/vue-output-target/vue-component-lib/utils.ts

@@ -115,6 +115,16 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
       if (routerLink === EMPTY_PROP) return;
 
       if (navManager !== undefined) {
+        /**
+         * This prevents the browser from
+         * performing a page reload when pressing
+         * an Ionic component with routerLink.
+         * The page reload interferes with routing
+         * and causes ion-back-button to disappear
+         * since the local history is wiped on reload.
+         */
+        ev.preventDefault();
+
         let navigationPayload: any = { event: ev };
         for (const key in props) {
           const value = props[key];
@@ -185,6 +195,17 @@ export const defineContainer = <Props, VModelType = string | number | boolean>(
         }
       }
 
+      // If router link is defined, add href to props
+      // in order to properly render an anchor tag inside
+      // of components that should become activatable and
+      // focusable with router link.
+      if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
+        propsToAdd = {
+          ...propsToAdd,
+          href: props[ROUTER_LINK_VALUE],
+        };
+      }
+
       /**
        * vModelDirective is only needed on components that support v-model.
        * As a result, we conditionally call withDirectives with v-model components.