对于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>
但是同样如果index.html中的<ion-nav-back-button></ion-nav-back-button>依旧存在的话,这样有可能在下级页面中会出现有一个自定义的返回和一个<ion-nav-back-button></ion-nav-back-button>同时存在,所以这样的方式并不可行。
通过传参数进行跳转的自定义方法:<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('上级页面路由'); };
这样就不需要再传递上级页面的路由参数。对于跨页面的跳转采用上面的方式更好,对于没有跨页面的跳转就可以使用下面的方式。