Ionic Vue 中 ion-router-outlet 不显示页面内容怎么办?
我在用 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>
页面路径能跳转,浏览器地址栏变了,但内容区域一直是空的,控制台也没报错,真的搞不懂哪里漏了……
Ionic 的 tabs 体系是这样玩的:ion-tabs 是个容器,内部包含 ion-router-outlet(负责渲染页面)和 ion-tab-bar(底部导航)。你把 ion-router-outlet 放在外面,它就不知道该在哪里渲染内容了。
改一下试试:
把 ion-router-outlet 放到 ion-tabs 里面,页面应该就能正常显示了。