對於ionic中使用的angular-ui-router，新建的一個帶有tabs的專案的路由結構如下

      .state('tab', {
        url: '/tab',
        abstract: true,
        templateUrl: 'templates/tabs.html'
      })
      .state('tab.home', {
        url: '/home',
        cache: false,
        views: {
          'tab-home': {
            templateUrl: 'templates/tab-home.html',
            controller: 'HomeCtrl'
          }
        }
      })
 

但是這樣的路由配置如果我們想要點選進入下級頁面的時候，在下級頁面即使在index.html中設定了<ion-nav-back-button></ion-nav-back-button>在下級頁面也不會出現返回按鈕，這是因為下級頁面跟上級頁面不在同一個<ion-nav-view></ion-nav-view>中，這樣不能共享歷史記錄，所以無法返回。

這時候就需要自己定義一個元件：

<ion-nav-buttons side="left">
  <a href="javascript:history.back(-1)" class="button button-icon icon ion-ios-arrow-thin-left" nav-direction="back"></a>
</ion-nav-buttons>
 

通過傳引數進行跳轉的自定義方法：

<ion-nav-buttons side="left">
  <a class="button button-icon icon ion-ios-arrow-thin-left" ng-click="back()"></a>
</ion-nav-buttons>
在上一個頁面跳轉的時候傳遞一個引數：

$state.go('detail',{'back':'tab.home'});

$scope.back = function() {
  $ionicViewSwitcher.nextDirection('back');
  $state.go($stateParams.back);
};

或者記錄上級頁面路由採用

$scope.back = function() {
  $ionicViewSwitcher.nextDirection('back');
  $state.go('上級頁面路由');
};

這樣就不需要再傳遞上級頁面的路由引數。對於跨頁面的跳轉採用上面的方式更好，對於沒有跨頁面的跳轉就可以使用下面的方式。