ionic之路由跳转

傷城~ 2022-07-16 23:08 427阅读 0赞

# 简介 #

ionic中比较常见的两个基于状态机（stateProvider）的页面跳转分别是

*  ui-sref
 *  state.go

查看ui-sref的底层实现源码可以看到

element.bind("click", function(e) { 
        var button = e.which || e.button;
        if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
    
          var transition = $timeout(function() { 
            // HERE we call $state.go inside of ui-sref
            $state.go(ref.state, params, options);
          });

ui-sref最终同样是选择了state.go的方式传递参数。因此两者之间的调用，应该是互通的。

# 基础准备 #

1.  创建一个空白的项目，在body标签中增加下面的代码

1.  在www文件夹下面创建templates文件夹，并创建list.html和detail.html

![这里写图片描述][20160822133024225]

1.  在app.js中，增加config的代码

.config(function ($stateProvider, $urlRouterProvider) { 
    
        // Ionic uses AngularUI Router which uses the concept of states
        // Learn more here: https://github.com/angular-ui/ui-router
        // Set up the various states which the app can be in.
        // Each state's controller can be found in controllers.js
        $stateProvider
          .state('list', {
            url: '/main',
            templateUrl: 'templates/list.html',
            controller: 'listCtrl'
          })
    
          .state('detail', {
            url: '/detail',
            params:{
       "id":null},
            templateUrl: 'templates/detail.html',
            controller: 'detailCtrl'
          })
    
        $urlRouterProvider.otherwise('/main')
      });

其中，params，就是用来声明list向detail传递的参数的。如果多个变量，可以用`，`隔开。

# ui-sref跳转并传递参数 #

list.html中增加下面的代码，点击后跳转到detail页面

# state跳转并传递参数 #

ListController中增加下面的代码，点击后跳转到detail页面

//显示大图
          $scope.showBigImage = function (imageIndex) {   //传递一个参数（图片的URl）
            $state.go('detail', {id: imageIndex}, {});
          };

然后在list中，创建一个元素，绑定`ng-click = showBigImage(0)` 即可

# 解析参数 #

在DetailController中，使用$stateParams获取参数

console.log("detailCtrl id = ", $stateParams.id);

[20160822133024225]: /images/20220717/cda9b849cf2c41dea3177cf1f879ff96.png