ionic3.x版本-實現點擊tab導航欄判斷是否已經登陸然后加載不同頁面，和退出登錄功能。

html代碼：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="首頁" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="商家" tabIcon="cart"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="我的" tabIcon="md-contact"></ion-tab>
  <div class="nav3" (click)="change()"></div>
</ion-tabs>

tabs跳轉控制代碼

@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = 'HomePage';
  tab2Root = 'StoreNearbyPage';
  tab3Root = 'MinePage';

  @ViewChild('myTabs') tabRef: Tabs;
  constructor(public navCtrl: NavController) {

  }

  change() {
    if (localStorage.getItem('token')) {
      this.tabRef.select(2);
    } else {
      this.navCtrl.push('LoginPage')
    }
  }
}

　就是在我的tab欄上加了一個透明塊，點擊透明塊的時候如果已經登錄調用tab組件的select方法，選中tab實現跳轉配置頁面。如果未登錄就使用ionic的頁面跳轉。把登錄頁push進去。

   

    用戶在我的tab欄下子頁面退出登錄，因為不能直接調用navCtrl.pop()方法返回我的頁面。

　子頁面退出方法

 

import {IonicPage, NavController, NavParams, Navbar, App, ViewController} from 'ionic-angular';

out() {
    this.common.$http('DELETE', '/logout')
      .subscribe(res => {
        localStorage.clear();
        this.appCtrl.getRootNav().push('TabsPage');
      })
  }

注入ionic-angular的APP模塊。直接把tab頁面丟回根導航。這樣在其他tab下面的子頁面退出的時候就能返回首頁了。

可能描述的不太好。至說出了個大概處理的思路。有想法的童鞋可以留言指導