Reload data for different routes but same component

How can I reload component when route is changed but the route is same?

I don’t have :key params on ion-router-outlet so I can’t reload data in my component when I click on button that point to the same component but with different id:

Component: Profile

Routes:

FROM
/profile/6032255274ca884295689e82

TO
/profile/6032255274ca884295651e82

Result:

are we supposed to provide a suggestion by just looking at screenshots? I a little bit of code goes a long way!!

There are 2 components Parent (App.vue) → Child (Profile.vue)

Url: /profile/60322956c35f3018e17093b5

From App.vue, i search an user from searchbar and I click on one of the result:

The click calls goToPage function in App.vue

goToPage(id, type) {
      .....
      this.$router.push({name: nameCapitalized, params: {id: id}})
    }

NEW URL:

/profile/6032255274ca884295689e82

It seems that it doesn’t refresh data because I call an already mounted component (Profile.Vue) and does not understand that I need to load another profile.

Profile.vue

   }
  },
  created() {
    this.getUserProfile()
  },

you should watch for changes in the id and reload the data in the page… would need to see more code to provide additional insight… maybe use a computed property to render the updates

Sorry to revive an old topic, but for anyone else stumbling across this. You can use ionViewDidEnter() from Vue Lifecycle - Ionic Documentation to call methods and update page data for each time the view is loaded.

I had a very similar implementation with IDs and my equivalent solution was to have both created and ionViewDidEnter call an initialise function to get fresh data.

Hope this helps someone and sorry again for the revival.

...
created() {
    this.initialiseComponent();
},
ionViewDidEnter() {
    this.initialiseComponent();
},
methods: {
    ....
    initialiseComponent() {
        this.getProfile(this.$route.params.id)
    },
    ...
},
...