Ionic Vue 中 ion-router-outlet 不显示页面内容怎么办?

UI福萍 阅读 3

我在用 Ionic + Vue 做一个简单的 tabs 应用,但切换 tab 时页面内容完全不显示,只看到空白。路由配置看起来没问题,组件也正确引入了,但就是渲染不出来。是不是 ion-router-outlet 的用法有问题?

这是我的 App.vue 里的关键代码:

<template>
  <ion-app>
    <ion-router-outlet />
    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="home" href="/home" rel="external nofollow" >
          <ion-icon :icon="homeOutline" />
          <ion-label>首页</ion-label>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
  </ion-app>
</template>

页面路径能跳转,浏览器地址栏变了,但内容区域一直是空的,控制台也没报错,真的搞不懂哪里漏了……

我来解答 赞 1 收藏
二维码
手机扫码查看
1 条解答
迷人的圣恩
兄弟,你这个结构写错了。ion-router-outlet 不能和 ion-tabs 平级放在外面,得塞到 ion-tabs 里面去。

Ionic 的 tabs 体系是这样玩的:ion-tabs 是个容器,内部包含 ion-router-outlet(负责渲染页面)和 ion-tab-bar(底部导航)。你把 ion-router-outlet 放在外面,它就不知道该在哪里渲染内容了。

改一下试试:



把 ion-router-outlet 放到 ion-tabs 里面,页面应该就能正常显示了。
点赞
2026-03-10 20:04