vue RouterLink is not working properly in ionic

Question

when Im using router-link in ionic vue, the first navigation is ok, but when I try to navigate for the second time or even when I press browser back button I get this error:

Uncaught TypeError: can't access property "classList", enteringEl is undefined

these are my components that I tried testing:

Products:

<template>
  <master-layout pageTitle="Login Form">
    <ion-card-header>
      <ion-card-title>Product Page</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Test<br/>
      <RouterLink to="/Warehouses">Warehouses</RouterLink>
    </ion-card-content>
  </master-layout>
</template>

<script>
import {
  IonCardHeader, IonCardTitle, IonCardContent,RouterLink
} from "@ionic/vue";

export default {
  components: {
    IonCardHeader, IonCardTitle, IonCardContent,RouterLink
  }
};
</script>

warehouses:

<template>
  <master-layout pageTitle="Login Form">
    <ion-card-header>
      <ion-card-title>Warehouse Page</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      Warehouse<br/>
      <RouterLink to="/Products">Products</RouterLink>
    </ion-card-content>
  </master-layout>
</template>

<script>
import {
  IonCardHeader, IonCardTitle, IonCardContent,RouterLink
} from "@ionic/vue";

export default {
  components: {
    IonCardHeader, IonCardTitle, IonCardContent,RouterLink
  }
};
</script>

now when I start navigating from products, when I click on warehouses, its ok and I navigate to warehouses, but when I click back button or products link, I get the error I said above.

any suggestion in what is causing this problem and how should I fix it?

Answer 1

for those who have the same problem, this is the solution: wrap your template in <ion-page></ion-page> so it would be:

<template>
  <ion-page>
    ...
  </ion-page>
</template>