Ionic VueJS 未捕获（承诺中）TypeError：entringEl 未定义

Question

当我在 Ionic 中使用

Uncaught (in promise) TypeError: enteringEl is undefined

从主视图转到配置文件视图（用于编辑配置文件等）时，控制台中会出现此错误

router.push

我已经修改了模板并添加了

ion-page

作为包装器以确保不是这样，我不太明白发生了什么。主页加载得很好，但另一个奇怪的事情是当我进入帐户页面时，页面上没有任何内容。我也不知道该怎么办，因为调试这个非常困难，而且谷歌向我展示的结果很少。

主页（重定向自）

<template>
  <ion-page>
    <ion-content>
      <HomeHero />
      <HomeTournament />
      <HomeLivestreams />
      <HomeMusic />
      <HomeCTA />
      <HomeFooter />
    </ion-content>
  </ion-page>
</template>
<script setup lang="ts">
import { IonContent, IonPage } from "@ionic/vue";
import HomeHero from "@/components/HomeHero.vue";
import HomeTournament from "@/components/HomeTournament.vue";
import HomeLivestreams from "@/components/HomeLivestreams.vue";
import HomeMusic from "@/components/HomeMusic.vue";
import HomeCTA from "@/components/HomeCTA.vue";
import HomeFooter from "@/components/HomeFooter.vue";
</script>

我的帐户页面（它被重定向到）

<template>
  <ion-page class="account">
    <ion-content>
      <ion-grid>
        <ion-row>
          <ion-col size="12" size-md="6">
            <ion-card>
              <ion-card-header>
                <ion-card-title>Account Info</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                <ion-list>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="Username"
                      labelPlacement="stacked"
                      :value="authVars.name"
                    ></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="Email"
                      labelPlaement="stacked"
                      :value="authVars.email"
                    ></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-label position="stacked">Gender</ion-label>
                    <!-- MARK// ADD GENDER SELECT HERE -->
                  </ion-item>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="First Name"
                      labelPlaement="stacked"
                      :value="firstName"
                    ></ion-input>
                  </ion-item>
                  <ion-item>
                    <ion-input
                      type="text"
                      label="Last Name"
                      labelPlaement="stacked"
                      :value="lastName"
                    ></ion-input>
                  </ion-item>
                </ion-list>
              </ion-card-content>
            </ion-card>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-content>
  </ion-page>
</template>

// Login to be redirected to account page
const submitLogin = async () => {
  const isFormCorrect = await login$v.value.$validate();
  if (!isFormCorrect) return;
  console.log("Login Submitted with details: ", logInput.value);
  const accountLogged = await auth.Login(
    logInput.value.email,
    logInput.value.password
  );
  if (accountLogged.type === "success") {
    const navResult = await router.push("/account");
    if (navResult) {
      // Navigation failed
      console.log("Navigation failed to account page");
    } else {
      console.log("Navigation to account page successful");
    }
  }
};
// index.ts for router
import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import HomePage from "../views/HomePage.vue";
// import AccountPage from "../views/AccountPage.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: HomePage,
  },
  {
    path: "/account",
    name: "My Account",
    component: () => import("@/views/AccountPage.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;import { createRouter, createWebHistory } from "@ionic/vue-router";
import { RouteRecordRaw } from "vue-router";
import HomePage from "../views/HomePage.vue";
// import AccountPage from "../views/AccountPage.vue";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: HomePage,
  },
  {
    path: "/account",
    name: "My Account",
    component: () => import("@/views/AccountPage.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

我不明白的是我的应用程序是如何应该布局的。这意味着我还需要另一个

ion-router-outlet

吗？这是我的App.vue

<template>
  <ion-app>
    <AppNavDrawer />
    <AppBar />
    <ion-router-outlet id="main-content" />
  </ion-app>
</template>

Answer 1

首先检查从“@ionic/vue”导入的所有组件，然后在组件中以正确的方式注册这些组件。