vue RouterLink 在 ionic 中无法正常工作

Question

当我在 ionic vue 中使用 router-link 时，第一次导航没问题，但是当我尝试第二次导航时，甚至当我按下浏览器后退按钮时，我得到这个错误：

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

这些是我尝试测试的组件：

产品：

<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>

仓库：

<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>

现在，当我从产品开始导航时，当我点击仓库时，一切正常，我导航到仓库，但是当我点击后退按钮或产品 link 时，我收到上面所说的错误。

关于导致此问题的原因以及我应该如何解决的任何建议？

Answer 1

对于遇到相同问题的人，这是解决方案：将您的模板包装在 <ion-page></ion-page> 中，这样它将是：

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

vue RouterLink 在 ionic 中无法正常工作

vue RouterLink is not working properly in ionic

ionic-framework

vue.js

vue-component