AngularJs ui-router路由跳转传参

妖狐艹你老母 2021-07-25 01:52 530阅读 0赞

1、在跳转a标签中通过跳转指令设置
    		ui-sref='state名称({键值对1,键值对2})'
    			其中,值如果是变量会自动解析,如果是字符串需要加""
    
    2、在对应state路由中设置
    		在url路径后添加"/{键名}/{键名}"
    
    3、读取参数
    	在对应的controller中,注入$stateParams
    		$stateParams.键名调用

代码示例:

<html ng-app="app" ng-controller="main">
    <head>
    	<meta charset="utf-8">
    	<title ></title>
    	
    	<script src="js/libs/angular.js"></script>
    	<script src="js/libs/angular.route.min.js"></script>
    	<script src="https://cdn.bootcss.com/angular-ui-router/1.0.25/angular-ui-router.js"></script>
     <style>
    	.a{ 
    		color:red;
    	}
     </style>
    	
    </head>
    
    <body>
    <div ng-controller='d1'>
    	<a href="#">首页</a>
    	<a href="#/home">home</a>
    	//传入参数
    	<a href="" ui-sref='movie({sex:"male",age:"18"})'>movie</a>
    	<a href="" ng-click="go('home')">跳转到home</a>
    	
    	<div ui-view>页面不存在</div>
    </div>
    
    
    
    <script>
    var app=angular.module('app',['ui.router']);
    
    app.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ 
    
    		//将'/hd'设置为默认页,打开页面自动跳转
    		$urlRouterProvider.otherwise('');
    
    		//创建路由
    		$stateProvider.state('default',{ 
    			//路径为空表示在当前页面
    			url:'',
    			template:'<h1>哈哈</h1>'
    		})
    		.state('home',{ 
    			url:'/home',
    			template:'<h1>home{ {name}}</h1>',
    			//控制器
    			controller:['$scope',function($scope){ 
    				$scope.name='jeff'
    			}]
    		})
    		.state('movie',{ 
    		//接收参数
    			url:'/movie/{sex}/{age}',
    			templateUrl:'./angular/user.html',
    			controller:'movieCon'
    
    		})
    
    }])
    
    
    app.controller('main',['$scope',function($scope){ 
    
    }])
    
    app.controller('d1',['$scope','$state',function($scope,$state){ 
    
    	$scope.go=function(url)
    	{ 
    		$state.go(url);
    	}
    }])
    
    app.controller('movieCon',['$scope','$stateParams',function($scope,$stateParams){ 
    	$scope.age=17;
    
    	$scope.user=[
    	{ id:1,name:'jeff'},
    	{ id:2,name:'mike'}
    	]
    	//读取参数
    	console.log($stateParams.sex,$stateParams.age)
    
    }])
    
    
    
    
    
    
    
    </script>
    
    </body>
    </html>