Understanding how routes and components work in Ionic (component re created instead of reused)

Hey guys! I’m new to both Ionic and Vue, and I’m still grasping their concepts, so bear with me .

So the TL;DR → seems like my components are always re created when I replace the current route with a new route. And as I said, I’m new to Vue and Ionic, but I feel like this should work the other way around: components should always be reused and not re created, although the opposite is happening. The route uses the same component (and sub components), but it is being created again each time the URL changes and I loose all of my data. Is this the correct behavior?

I’m using the following packages:

    "@ionic/vue": "^6.0.8",
    "@ionic/vue-router": "^6.0.8",
    "pinia": "^2.0.11",
    "vue": "^3.2.25",
    "vue-router": "^4.0.12"

And in router/index.js I have a the following router structure:

import { createRouter, createWebHistory } from "@ionic/vue-router";

const routes = [
  ...otherRoutes,
  {
    path: "/:userId/message",
    redirect: to => `/${to.params.userId}/message/A`
  },
  {
    path: "/:userId(\\d+)/message/:messageId",
    component: () => import("../views/MessagePage.vue"),
    name: "message",
    props: true,
  },
];

const router = createRouter({
  history: createWebHistory(BASE_PATH),
  routes,
});

export default router;

I have three types of messages (let’s call them A, B and C), so I created three components, one for each, which will be loaded inside of MessagePage.vue. I’m just trying to use the router’s messageId param to hold the information for the sub component I need to select on the first place (ComponentA, ComponentB or ComponentC).

So my MessagePage.vue looks something like (simplified):

<template>
  <ion-page>
    <ion-content class="message-page">
      <ComponentA v-if="inCompA" />
      <ComponentB v-if="inCompB"/>
      <ComponentC v-if="inCompC"/>
    </ion-content>
    <ion-footer>
      <ion-toolbar>
      <ion-segment class="segment">
        <ion-segment-button
          value="A"
          layout="icon-start"
          @click="selectMessageType"
        >
          <ion-label>A</ion-label>
        </ion-segment-button>
        <ion-segment-button
          value="B"
          layout="icon-start"
          @click="selectMessageType"
        >
          <ion-label>B</ion-label>
        </ion-segment-button>
        <ion-segment-button
          value="C"
          layout="icon-start"
          @click="selectMessageType"
        >
          <ion-label>C</ion-label>
        </ion-segment-button>
      </ion-segment>
      </ion-toolbar>
    </ion-footer>
  </ion-page>
</template>

<script>
export default {
  // ... import components
  props: ['userId', 'messageId'],

  methods: {
    selectMessageType(evt) {
      const messageType = evt.target.value;
      this.$router.replace({
        name: "message",
        params: { userId: this.userId, messageType },
      });
    },
    computed: {
      inCompA() {
        return this.messageType === "A";
      },
      inCompB() {
        return this.messageType === "B";
      },
      inCompC() {
        return this.messageType === "C";
      },
    },
  }
}
</script>

So I have some data stored in my MessagePage.vue component, gotten from the “child” components (ComponentA, ComponentB and ComponentC), which gets lost when I switch between components with selectMessageType.

Thanks in advance for any hint.