Ionic6 Tabs内容DOM可见但页面无法正常显示问题求助

算力阿峰

2026-10-4

问题原因及修复方案

路由路径与跳转地址不匹配
你在tabs-routing.module.ts中定义的首页路由路径是hause，但在tabs.page.html的首页签按钮中，href属性写的是#/tabs/home，路径拼写不一致导致路由跳转异常。此外ion-tab-button绑定正确的tab属性后会自动生成跳转地址，无需手动写href属性，直接删除即可。
修复后的首页签按钮代码：
```
<ion-tab-button tab="hause">
  <ion-icon name="home"></ion-icon>
  <ion-label>Home</ion-label>
</ion-tab-button>
```
根模块重复导入懒加载页面模块
你已经在tabs路由中配置了HomePageModule的懒加载规则，不需要再在app.module.ts的imports数组中引入HomePageModule，重复导入会导致页面渲染逻辑冲突。请删除app.module.ts imports数组中的HomePageModule项。
tabs页面缺省路由出口
你tabs.page.html的<ion-tabs>组件内没有添加路由出口，路由匹配到的子页面内容没有对应的挂载容器，所以内容虽然已经生成到DOM中，但没有符合Ionic布局规范的承载节点，导致视觉上不可见。请在<ion-tabs>标签内添加<ion-router-outlet></ion-router-outlet>，修复后完整tabs.page.html代码：
```
<ion-tabs>
  <ion-router-outlet></ion-router-outlet>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="hause">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="settings">
      <ion-icon name="cog"></ion-icon>
      <ion-label>Einstellungen</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
```
（可选优化）路由配置冗余项
你tabs-routing.module.ts的providers数组中加入了TabsPageRoutingModule本身，属于无效配置，可以直接删除该项。