时间戳

首页 > 解决方案 > vue RouterLink 在 ionic 中无法正常工作

vue.js - vue RouterLink 在 ionic 中无法正常工作

问题描述

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

未捕获的类型错误：无法访问属性“classList”，进入El 未定义

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

产品：

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

现在当我开始从产品导航时，当我点击仓库时，没问题，我导航到仓库，但是当我点击后退按钮或产品链接时，我得到了上面所说的错误。

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

标签： vue.jsionic-frameworkvue-component

解决方案

对于那些有同样问题的人，这就是解决方案：将您的模板包装起来，<ion-page></ion-page>这样它将是：

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

推荐阅读