Ionic3混合应用开发：如何实现所有页面固定显示Tabs？

我之前也碰到过一模一样的问题，尤其是点击侧边栏后Tabs就消失的情况，下面是亲测有效的解决步骤：

• 第一步：把Tabs页面设为应用的根页面
  打开app.component.ts，确保根页面指向你的TabsPage，让整个应用的导航栈从Tabs开始：

  import { TabsPage } from '../pages/tabs/tabs';
  
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
    rootPage: any = TabsPage;
  
    constructor(platform: Platform) {
      platform.ready().then(() => {
        // 初始化相关代码
      });
    }
  }
  

• 第二步：所有页面跳转都在Tabs的导航栈内进行
  很多时候Tabs消失，都是因为跳转时误用了setRoot()直接替换了根页面，跳出了Tabs的导航栈。正确的做法是用push()把新页面添加到当前Tabs的导航栈中：

  // 在任意页面内跳转时，优先使用push而非setRoot
  goToDetailPage() {
    this.navCtrl.push(DetailPage);
  }
  

• 第三步：处理侧边栏跳转的特殊情况
  这是最容易踩坑的地方！如果你的侧边栏是独立组件，跳转时不能直接设置根页面，得先获取Tabs的导航控制器，再在Tabs栈内完成跳转：

  import { App } from 'ionic-angular';
  import { TabsPage } from '../pages/tabs/tabs';
  
  constructor(private app: App) {}
  
  navigateToTargetPage(page) {
    // 获取当前活跃的Tabs导航实例
    const tabsNav = this.app.getActiveNavs()[0];
    
    // 先回到Tabs根页面，再跳转到目标页面（可选，根据你的业务需求调整）
    tabsNav.setRoot(TabsPage).then(() => {
      tabsNav.push(page);
    });
  
    // 如果目标页面属于某个特定Tab，也可以先切换Tab再跳转：
    // tabsNav.parent.select(0).then(() => { // 0是Tab的索引，比如首页Tab
    //   tabsNav.push(page);
    // });
  }
  

• 第四步：检查路由配置
  确保所有页面都没有被配置为独立的根路由，而是作为Tabs页面的子路由。比如在tabs.ts里的基础配置：

  export class TabsPage {
    tab1Root = HomePage;
    tab2Root = ProfilePage;
    tab3Root = SettingsPage;
  
    constructor() {}
  }
  

只要严格按照这个逻辑来操作，不管是从Tab页面跳转，还是从侧边栏跳转，Tabs栏都会一直固定显示在页面底部啦！

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