Vue 未解决 Ionic 后退按钮组件的问题

Question

我无法找出为什么我从 Vue 收到此警告，并且后退按钮不起作用：

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: ion-back-button 
  at <TheHeader titulo="Home" > 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <Home ref=Ref< undefined > key="/home" isInOutlet=true  ... > 
  at <IonRouterOutlet> 
  at <IonApp> 
  at <App>

这是一个从头开始的简单应用程序，一些页面共享一个 header，我试图将其外包到一个名为 TheHeader 的新组件中。从那以后，后退按钮不再起作用。

我试图跳过不必要的代码以更快地进入正题。这是我的一个页面，Home.vue:

<template>
    <ion-page>
        <the-header titulo="Home"></the-header>
        <ion-content>
        </ion-content>
    </ion-page>
</template>

<script>
import { IonContent, IonPage } from '@ionic/vue';
import TheHeader from '../components/TheHeader.vue';

export default {
  name: 'Home',
  components: {
    IonContent,
    IonPage,
    'the-header': TheHeader
  }
};
</script>

这是我的TheHeader.vue组件：

<template>
    <ion-header>
        <ion-toolbar>
            <ion-buttons name="start">
                <ion-back-button>
                </ion-back-button>
            </ion-buttons>
            <ion-title>
                {{ titulo }}
            </ion-title>
        </ion-toolbar>
    </ion-header>
</template>

<script>
import { IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton } from '@ionic/vue'

export default {
    props: [
        'titulo'
    ],
    components: [
        IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton
    ]
}
</script>

好吧，如果我从主页导航到另一个页面，这基本上是相似的（我在 ion-content 中使用非常基本的导航菜单），或者即使我重新加载此页面，也没有导航全部，我收到上述警告，如果我导航到另一个页面，然后单击后退按钮，则不会加载上一个页面。

我做错了什么？

Answer 1

components specify that the type is only Object. And this demo 的文档显示数组不能用于 components。

解决办法是把components改成TheHeader.vue中的Object:

export default {
    // BEFORE:
    components: [ IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton ]

    // AFTER:                                                             
    components: { IonHeader, IonToolbar, IonTitle, IonButtons, IonBackButton }
}

Vue 未解决 Ionic 后退按钮组件的问题

Problem with Ionic back button component not being resolved by Vue

javascript

vue.js

ionic-framework

ionic4

vuejs3