ionic 中的路由玩法

开发ionic的项目，路由其实还是蛮重要的一个东西。有了这个东西，我们可以很轻松的实现页面的切换和跳转。这里我就介绍一些ionic中的一些路由的简单玩法。

1.路由的准备

首先我们要想路由能很好的工作，那我们就需要在config中配置好相关的东西。在config中需要用到$stateProvider 和$urlRouterProvider两个模块，我们要将他们依赖进来。

然后我们就先用$stateProvider配置好所有的state

      例如 .state('login', {
                    url: '/login',
                    templateUrl: "modules/login/templates/login.html",
                    controller: 'LoginCtrl'
                })

接着设置打开应用后默认显示的页面 $urlRouterProvider.otherwise('/login');

2.路由的跳转

1）路由的跳转有很多种，比如ionic下面的tabs切换就用的是href ,下面图就是ionic案例中的tabs的路由跳转，这里href后面的参数是追加到路径中的最后的那一部分

2）第二个是使用ui-sref指令,指令后面的参数是配置的state 中的名字 如我们上面给了一个登录的state配置，要跳转到登录只需要在标签上添加 ui-sref="login"即可

3）接着我们介绍使用js跳转路由。使用js跳转路由需要在控制器或者其他使用跳转的地方注入$state。首先为大家介绍的是go方法。它的使用方法很简单

$state.go(to [, toParams] [, options]) （详细参数和使用方法可以去这查看）

4）$state对象中除了go方法可以实现跳转，还有一个方法也可以实现跳转，那就是 transitionTo方法

$state.transitionTo(to, toParams [, options]) （详细参数和使用方法可以去这里查看）

$state中的reload方法也是同过这个方法实现的

	$state.transitionTo($state.current, $stateParams, { 
    	  reload: true, inherit: false, notify: false 
   	 });

5）如果不想用$state 没关系，我再介绍其他的对象，这个对象便是$location，当然要使用它也是需要注入。比如我现在想跳转到登录页面时我只需要$location.path('/lgin').replace() 

3.监控路由的变化

如果想在路由跳转前进行部分操作就使用 

$scope.$on('$stateChangeStart',function(event,toState,toParams,fromState,fromParams){

do something

})

这里的toState信息便是你要切换的state的信息，比如我要去login页面，那么这个toSate对象便是

 

这个的用处还是很大的，比如我现在是登录页面的时候，如果我开始登录了，然后退出的时候我现在返回的时候就不能回到之前登陆过的页面。这时候就可以调用

event.preventDefault() 来阻止页面跳转

当然还有一个也可以在路由切换之后执行一些操作 那就使用$stateChangeSuccess