Ionic 3应用退出登录跳转登录页时Tabs无法隐藏如何解决

我太懂这种烦恼了！Ionic 3里Tabs的导航逻辑有时候确实容易绕晕，你遇到的问题本质是登录页被塞进了Tabs的导航栈里，所以Tabs作为父级页面一直存在，自然藏不住。下面给你两种亲测有效的解决方案：

方案一：直接替换应用根导航（最推荐） #

你之前写错了setRoot的用法，而且关键是要拿到整个应用的根导航控制器，而不是Tabs内部的导航。具体步骤：

1. 先在组件中导入App模块：

import { App } from 'ionic-angular';

2. 在构造函数中注入App：

constructor(private app: App) {}

3. 退出登录的方法里，用根导航设置登录页为新的根页面：

logout() {
  // 先执行清除用户token、缓存等操作
  this.app.getRootNav().setRoot('LoginPage');
}

这样做相当于把整个应用的导航栈完全替换，原来的Tabs页面被直接移除，登录页成为新的根，Tabs自然就消失了。

方案二：利用Tabs的导航栈切换（适合复杂场景） #

如果你的应用是先进入登录页，登录后再设置Tabs为根页面，那退出时可以直接切回登录页作为根：

// 假设在Tabs页面的某个子页面中
logout() {
  this.navCtrl.parent.setRoot('LoginPage');
}

这里的navCtrl.parent就是Tabs的导航控制器，用它设置根页面也能替换掉Tabs本身，达到隐藏效果。

为什么之前的方法没用？ #

你用this.navCtrl.push('LoginPage')时，登录页是被添加到当前Tabs子页面的导航栈里，Tabs作为父级组件始终在DOM中，所以底部栏不会隐藏。而setRoot是直接替换整个导航栈的根，彻底把Tabs从当前导航结构中移除，这才是关键！

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