1.詳情頁重新整理，確保當前頁面資料不丟失

• 首先假設 首頁（home）跳轉到 home-details,傳遞引數code:

  //home.ts
  this.navCtrl.push(HomeDetailsPage,{
    code:code
  })

   

• 然後再home-details.ts中獲取傳過來的引數：

  //home-details.ts
  this.id = this.navParams.get('code');

   

• 最後，設定位址列的形式：

  //home-details.ts
  @IonicPage({
    name: 'HomeDetailsPage',
    segment: 'details/:code'
  })
   
  

   

2.頁面重新整理以後返回按鈕會消失，此處你可以讓返回按鈕，強制顯示，也可以自行新增一個返回按鈕

• 自行新增一個返回按鈕

  //home.details.html
  <ion-icon name="arrow-back" class="violet back-icon" (click)="back()"></ion-icon>

   

3.點選返回按鈕，回到TabsPage頁面

• //home.details.ts
  back(){
  //注意,setRoot(),括號內不能直接填寫HomePage,否則，tabs會消失
   this.app.getRootNav().setRoot(TabsPage);  
  }
   
  

  注意：此時回到首頁以後，發現位址列url並沒有變化，此時點選重新整理以後，頁面仍然顯示的是詳情頁

• //home.details.ts
  @IonicPage({
    name: 'HomeDetailsPage',
    segment: 'details/:code'
  })
  
  ========================================================================
  
   back() {
  
  //首次進入詳情頁位址列：http://localhost:8100/#/home/details/code
  //當詳情頁重新整理以後位址列：http://localhost:8100/#/details/code
  
   location.href.indexOf('#/details');   //這裡判斷頁面是否重新整理，如果重新整理回退2級，否則退到上一級
  
      this.UrlCompare = (location.href.indexOf('#/details') > 0) ? -2 : -1
  
       this.app.getRootNav().setRoot(TabsPage, {  //跳轉回到TabsPage，並且傳引數
        item: 'home',
        UrlCompare:this.UrlCompare
      });
  
    }
   
  

   

4.在TabsPage頁面,根據傳回的引數，判斷url應該回退幾次，以及該顯示在哪一個tabs頁面

•      

  //定義變數
   item: string;
   UrlCompare: number;
  
   constructor(public navCtrl: NavController, public navParams: NavParams) {
  
      this.item = this.navParams.get('item');
      this.UrlCompare = this.navParams.get('UrlCompare');
     //根據值，判斷回退幾次
      if(this.UrlCompare !=null ||this.UrlCompare !=undefined){
        window.history.go(this.UrlCompare);
      } 
    }
  
    ionViewDidEnter() {
  
      if (this.item != undefined) {
         //根絕不同的引數進入不同的頁面
        if (this.item == 'home') {
          this.tabRef.select(0);
        } else if (this.item == 'user') {
          this.tabRef.select(1);
        }
  
      }
  
    }

   

PS：預設.隱藏全部子頁面tabs

• 在app.module.ts裡配置
•  

   IonicModule.forRoot(MyApp, {
        tabsHideOnSubPages: 'true', //隱藏全部子頁面tabs
    })