Unrelated view is mounted

Ionic Framework Ionic Vue
1

I’m using Ionic v5 Vue for a simple app.

{
  path: '/account',
  component: () => import('@/views/Account.vue'),
},
{
  path: '/invoice',
  component: () => import('@/views/Invoice.vue'),
},

And then in each component I do async stuff onMounted and also each component has ion-back-button to take the user back to dashboard.

The issue I’m having is that if I visit /account, go back and then go to /invoice the account is also mounted. I confirmed it by console logging from onMounted of /account.

What am I doing wrong?

2

Do you have an IonPage component in both components? Otherwise, we might need to see the code in the Account and Invoice components.

On a related note, you may want to read how Ionic handles the Vue Lifecycle if you aren’t aware. Ionic keeps components around in the DOM so onMounted doesn’t always get called as expected in a normal Vue app.

4

Okay, resolved this by using custom hooks:

  onIonViewWillEnter,
  onIonViewDidEnter,
  onIonViewWillLeave,
  onIonViewDidLeave
1 Like