ionic路由对于返回的处理

来源：互联网发布：apache jmeter 3.2 编辑：程序博客网时间：2024/06/08 09:54

对于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('上级页面路由');};
这样就不需要再传递上级页面的路由参数。对于跨页面的跳转采用上面的方式更好，对于没有跨页面的跳转就可以使用下面的方式。

0 0