angular-页面跳转传递参数

时间:2021-08-16 11:33:40

页面1:传递参数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular.js"></script>
</head>
<body ng-app="myAppGoTo1" ng-controller="myCtrlGoTo1">
<button ng-click="goTo()">跳转到page2,并携带参数</button>

<script>
var app = angular.module("myAppGoTo1", []);

app.controller("myCtrlGoTo1", function ($scope) {
$scope.goTo = function () {
var id = 100;
var name = "zhangsan";
var person = {firstname: "John", lastname: "Doe", age: 50, eyecolor: "blue"};//对象
location.href = "page2.html?id=" + id + "&name=" + name + "&person=" + angular.toJson(person);
}
});
</script>
</body>
</html>

页面二:获取参数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular.js"></script>
</head>
<body ng-app="myAppGoTo2" ng-controller="myCtrlGoTo2">
<button ng-click="get1()">$location.search()获取page1传过来的参数</button>
<button ng-click="get2()">location.search:replace获取page1传过来的参数</button>
<button ng-click="get3()">location.search:subStr获取page1传过来的参数</button>

<script>
var app = angular.module("myAppGoTo2", []);

//$location.search()需要此配置
app.config(['$locationProvider', function ($locationProvider) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}]);

app.controller("myCtrlGoTo2", function ($scope, $location) {
$scope.get1 = function () {
console.log("$location.search()===" + $location.search());//[object Object]
console.log("$location.search()类型===" + typeof $location.search());//object
if ($location.search().id) {
console.log("id======" + $location.search().id);
console.log("id类型======" + typeof $location.search().id);//string
}
if ($location.search().name) {
console.log("name======" + $location.search().name);
console.log("name类型======" + typeof $location.search().name);//string
}
if ($location.search().person) {
console.log("person======" + $location.search().person);
console.log("person类型======" + typeof $location.search().person);//string
//$location.search()获取的都是字符串,如果想得到对象需要再次转换
console.log("person======" + angular.fromJson($location.search().person));
console.log("person类型======" + typeof angular.fromJson($location.search().person));
}
};

$scope.get2 = function () {
var searchStr = location.search;
var searchArr = searchStr.split("&");
var id = searchArr[0].replace("?id=", "");//string
var name = searchArr[1].replace("name=", "");//string
var person = decodeURI(searchArr[2].replace("person=", ""));//decodeURI解码,string

console.log("location.search====" + searchStr);//?id=100&name=zhangsan
console.log("location.search类型====" + typeof searchStr);//string
console.log("id====" + id);
console.log("id类型====" + typeof id);
console.log("name====" + name);
console.log("name类型====" + typeof name);
console.log("person====" + person);
console.log("person类型====" + typeof person);
//location.search获取的都是字符串,如果想得到对象需要再次转换
console.log("person====" + angular.fromJson(person));
console.log("person类型====" + typeof angular.fromJson(person));
};

$scope.get3 = function () {
var searchStr = location.search;
console.log("location.search====" + searchStr);//?id=100&name=zhangsan
console.log("location.search类型====" + typeof searchStr);//string
var paramsStr = searchStr.substr(searchStr.indexOf("?") + 1);//先去掉?
var paramsArr = paramsStr.split("&");//再以&分割成数组
var id = paramsArr[0].substr(paramsArr[0].indexOf("=") + 1);
var name = paramsArr[1].substr(paramsArr[1].indexOf("=") + 1);
var person = decodeURI(paramsArr[2].substr(paramsArr[2].indexOf("=") + 1));//decodeURI解码,string

console.log("location.search====" + searchStr);//?id=100&name=zhangsan
console.log("location.search类型====" + typeof searchStr);//string
console.log("id====" + id);
console.log("id类型====" + typeof id);
console.log("name====" + name);
console.log("name类型====" + typeof name);
console.log("person====" + person);
console.log("person类型====" + typeof person);
//location.search获取的都是字符串,如果想得到对象需要再次转换
console.log("person====" + angular.fromJson(person));
console.log("person类型====" + typeof angular.fromJson(person));
}
});
</script>
</body>
</html>

参考:

【更新】AngularJs $location获取url参数