Vue 3 + Ionic 6 项目使用IonMenu组件导致页面黑屏问题

IonMenu组件放置位置不符合Ionic Vue布局层级规则，组件内置的遮罩层、内容偏移逻辑计算异常，主内容被遮挡或移出可视区域，最终出现黑屏。
Ionic的侧边菜单组件属于全局布局组件，必须放在应用根级容器<ion-app>内部，和全局路由出口平级，不能嵌套在路由切换渲染的子页面组件中。你当前的代码把菜单和绑定的路由出口都写在了业务子页面里，父容器是随路由切换销毁/重建的ion-page，导致菜单的定位、偏移计算完全失效。

1. 提取菜单代码到根组件
   将IonMenu相关代码从当前index-page业务页面中移除，放到项目根组件（默认路径src/App.vue）中，参考正确结构：

<!-- App.vue 根组件 -->
<template>
  <ion-app>
    <ion-menu side="start" content-id="mainContent">
      <ion-header>
        <ion-toolbar color="secondary">
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-label>START MENU CONTENTS</ion-label>
      </ion-content>
    </ion-menu>
    <ion-router-outlet id="mainContent" />
  </ion-app>
</template>

<script>
import {
  IonApp,
  IonRouterOutlet,
  IonContent,
  IonHeader,
  IonMenu,
  IonTitle,
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonApp,
    IonRouterOutlet,
    IonContent,
    IonHeader,
    IonMenu,
    IonTitle,
    IonToolbar
  }
});
</script>

2. 修正业务页面代码
   清理index-page中多余的菜单、嵌套路由出口代码，只保留业务页面本身的结构，需要唤起菜单时在页面头部添加菜单按钮即可：

<!-- src/pages/index-page.vue 业务页面 -->
<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-menu-button />
        </ion-buttons>
        <ion-title>页面标题</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <!-- 业务内容写在这里 -->
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonPage,
  IonContent,
  IonHeader,
  IonButtons,
  IonMenuButton,
  IonTitle,
  IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'index-page',
  components: {
    IonPage,
    IonContent,
    IonHeader,
    IonButtons,
    IonMenuButton,
    IonTitle,
    IonToolbar
  }
});
</script>

如果调整结构后问题仍存在，逐一确认以下配置：

• 入口文件（src/main.js/src/main.ts）已正确注册Ionic插件并引入核心样式，缺失核心样式会导致组件布局逻辑完全失效：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { IonicVue } from '@ionic/vue'

// 必须引入的核心样式
import '@ionic/vue/css/core.css'
import '@ionic/vue/css/normalize.css'
import '@ionic/vue/css/structure.css'
import '@ionic/vue/css/typography.css'

const app = createApp(App)
app.use(IonicVue)
app.use(router)

router.isReady().then(() => {
  app.mount('#app')
})

• 你当前依赖的@ionic/vue@6.0.0是v6大版本的初始发布版，存在多个已知的菜单组件渲染bug，可以升级到v6大版本的最新稳定版修复问题，执行命令：

npm install @ionic/vue@^6 @ionic/vue-router@^6

内容的提问来源于stack exchange，提问作者Kirill Kushpel