Components from different route paths loads in every route enter

Ionic Framework Ionic Vue
1

Hi, I just started my project with Ionic Vue and I love it, however I have a problem I don’t understand completely. Maybe I don’t know some mechanisms or I screwed up something.

Let’s say I’ve got home page (/home) and some elements with router-link, which push the application to another page. Every page is a separate component. When I go from /home to /products, the products component automatically loads products using axios (when created). I go back to home and I click element which change route to /settings. The new components loads, but the component that I just visited is also loading, even though I can’t see it. I know it, because I see axios request from products component and I started login every lifecycles of every component to the console. I wonder where it comes from, why the components, that I don’t use at the moment loads with another components…Of Course i will share my code, but maybe you faced similar problems?

2

example:

router:

const routes = [
{
    path: '/settings',
    name: 'Settings',
    component: () => import('../pages/SettingsPage.vue')
  },
  {
    path: '/empty',
    name: 'empty',
    component: () => import('../pages/EmptyPage.vue')
  }
]

empty:

<template>
  <base-layout back-link="/home">  
      <ion-list>
      <ion-item lines="full">
        <ion-icon size="large" slot="start"></ion-icon>
        <ion-label>Dark Mode</ion-label>
        <ion-toggle slot="end"></ion-toggle>
      </ion-item>
      <ion-item>
        <ion-label>Tryb pobierania zdjęć</ion-label>
        <ion-select  placeholder="Select" ok-text="OK" cancel-text="Cancel">
          <ion-select-option value="3">Mode 3</ion-select-option>
          <ion-select-option value="2">Mode 2</ion-select-option>
          <ion-select-option value="1">Mode 1</ion-select-option>
          <ion-select-option value="0">Mode 0</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>  
  </base-layout>
</template>
<script>

import {
  IonToggle,
  IonLabel,
  IonItem,
  IonList,
  IonSelect,
  IonSelectOption,
  IonIcon,
} from '@ionic/vue';
export default {
  components: {
    IonToggle,
    IonLabel,    
    IonItem,
    IonList,
    IonSelect,
    IonSelectOption,
    IonIcon,
  },
      created() {        
        console.log("Empty created")
    },
          mounted() {        
        console.log("Empty mounted")
    },
    updated(){
        console.log("Empty updated")
    },
    beforeUpdate(){
        console.log("Empty beforeUpdate")
    },
    beforeUnmount(){
        console.log("Empty Destroyed")        
    }
}
</script>

settings:

<template>
  <base-layout page-title="Ustawienia" back-link="/home">
    <ion-list>
      <ion-item lines="full">
        <ion-icon size="large" slot="start" :icon="moonOutline"></ion-icon>
        <ion-label>Tryb ciemny</ion-label>
        <ion-toggle slot="end" @ionChange="switchTheme($event)" :checked="darkMode"></ion-toggle>
      </ion-item>
      <ion-item>
        <ion-label>Tryb pobierania zdjęć</ion-label>
        <ion-select @ionChange="switchImgMode($event)" placeholder="Wybierz" :value="imageDownloadMode" ok-text="OK" cancel-text="Anuluj">
          <ion-select-option value="3">Wszystkie</ion-select-option>
          <ion-select-option value="2">Tylko jedno</ion-select-option>
          <ion-select-option value="1">Tylko miniaturka</ion-select-option>
          <ion-select-option value="0">Wyłączone</ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>

  </base-layout>
</template>

<script>
import {
  IonToggle,
  IonLabel,
  IonItem,
  IonList,
  IonSelect,
  IonSelectOption,
  IonIcon,
} from '@ionic/vue';
import { moonOutline } from 'ionicons/icons';
export default {
  components: {
    IonToggle,
    IonLabel,    
    IonItem,
    IonList,
    IonSelect,
    IonSelectOption,
    IonIcon,
  },
  data() {
    return {
      moonOutline
    };
  },
  methods: {
    switchTheme(event) {
      if (event.detail.checked) {
        document.body.setAttribute('color-theme', 'dark');
        this.$store.dispatch('config/setDarkMode', { darkMode: true, db: this.$db });
      } else {
        document.body.setAttribute('color-theme', 'light');
        this.$store.dispatch('config/setDarkMode', { darkMode: false, db: this.$db });
      }
    },
    switchImgMode(event) {
      this.$store.dispatch('config/setImageDownloadMode', { imgDwnMode: event.detail.value, db: this.$db });
    },    
  },
  computed:{
      darkMode(){
          return this.$store.getters['config/darkMode'];
    },
        imageDownloadMode(){           
            return this.$store.getters['config/imageDownloadMode'].toString();
        }

  },
      created() {        
        console.log("Settings created")
    },
          mounted() {        
        console.log("Settings mounted")
    },
    updated(){
        console.log("Settings updated")
    },
    beforeUpdate(){
        console.log("Settings beforeUpdate")
    },
    beforeUnmount(){
        console.log("Settings Destroyed")        
    }
  
};
</script>

fragment of Home

<ion-card  router-link="/empty">
  <ion-icon :icon="cloudOutline"></ion-icon>
   <h2>Online</h2>
    <ion-ripple-effect />
</ion-card>
// and so on

Now see console:
Zrzut ekranu 2021-08-30 204900

Why I have Empty created and Empty mounted in /settings path?

3

It looks like you aren’t wrapping each page in the IonPage component which is required in order for Ionic to make page transitions properly. Without it, you will get very weird results. - Reference.

You may also want to take a look at the Vue Lifecycle when using Ionic as when using Ionic it is different - Vue Lifecycle in Ionic.

4

Thank you for your replay.
Well, I created some base component, which wrap my every page (base-layout) and there I have ion-page and ion-content in the slot. I changed standard Vue methods to Ionic lifecycle methods and it works perfectly, so my problem was thankfully solved.

To check that problem I created a new empty project, added two sites with similar structure and login to console functionality. It seams, that the problem exists there as well with the standard Vue lifecycle methods like mounted(), created() etc. Maybe it’s the way, how Ionic Framework works under the hood and standard methods should’nt be used.

1 Like