我的ui-router个可选参数会创建一个长不太友好的网址，如何在保留参数的同时缩短网址。我需要能够在社交媒体上分享这个网址，对SEO友好。
如果我在我的状态下从我的网址中删除了一些参数，它仍会显示在我的视图中显示正确的数据，但在刷新时，只会显示我在网址中包含的参数中的数据。
我的链接：
<a class = "xtradetails" ng-click = "vm.detailsClick(car)">VIEW DETAILS</a>
JS：
vm.detailsClick = function (car) {
vm.detailsdata = car;
$state.params.car = car;
$state.go("cardetails", {
car : car,
stock_id : car.stock_id,
make : car.make,
year : car.year,
mileage : car.mileage,
variant : car.variant,
selling_price: car.selling_price,
colour : car.colour,
condition : car.condition,
branch : car.branch,
extras_csv : car.extras_csv,
description : car.description,
location : car.location,
body_type : car.body_type,
province : car.province,
company_id : car.company_id,
url1 : car.url1,
url2 : car.url2,
url3 : car.url3,
url4 : car.url4,
url5 : car.url5,
url6 : car.url6,
url7 : car.url7,
url8 : car.url8,
url9 : car.url9,
url10 : car.url10
}, {});
};
这是我的状态：
.state("cardetails", {
params : {
car : null,
make : null,
stock_id : null,
company_id : null,
year : null,
selling_price: null,
mileage : null,
variant : null,
colour : null,
condition : null,
branch : null,
extras_csv : null,
description : null,
province : null,
contact_tel : null,
url1 : null,
url2 : null,
url3 : null,
url4 : null,
url5 : null,
url6 : null,
url7 : null,
url8 : null,
url9 : null,
url10 : null,
squash : true
},
templateUrl: "partials/cardetails.html",
url : "/:make/:stock_id/:year/:selling_price/:mileage/:variant/:colour/:condition/:location/:province/:body_type/:branch/:extras_csv/:description/:url1/:url2/:url3/:url4/:url5/:url6/:url7/:url8/:url9/:url10",
controller : "Details"
})
我的控制器：
app.controller('Details', ["$scope", "$stateParams", function ($scope, $stateParams) {
$scope.car = $stateParams.car;
$scope.stock_id = $stateParams.stock_id;
$scope.make = $stateParams.make;
$scope.year = $stateParams.year;
$scope.variant = $stateParams.variant;
$scope.mileage = $stateParams.mileage;
$scope.colour = $stateParams.colour;
$scope.condition = $stateParams.condition;
$scope.selling_price = $stateParams.selling_price;
$scope.branch = $stateParams.branch;
$scope.extras_csv = $stateParams.extras_csv;
$scope.description = $stateParams.description;
$scope.location = $stateParams.location;
$scope.body_type = $stateParams.body_type;
$scope.company_id = $stateParams.company_id;
$scope.contact_number = $stateParams.contact_number;
$scope.address = $stateParams.address;
$scope.dealer = $stateParams.dealer;
$scope.suburb = $stateParams.suburb;
$scope.province = $stateParams.province;
$scope.contact_tel = $stateParams.contact_tel;
$scope.name = $stateParams.name;
$scope.url1 = $stateParams.url1;
$scope.url2 = $stateParams.url2;
$scope.url3 = $stateParams.url3;
$scope.url4 = $stateParams.url4;
$scope.url5 = $stateParams.url5;
$scope.url6 = $stateParams.url6;
$scope.url7 = $stateParams.url7;
$scope.url8 = $stateParams.url8;
$scope.url9 = $stateParams.url9;
$scope.url10 = $stateParams.url10;
$scope.car = {
make : $scope.make,
stock_id : $scope.stock_id,
company_id : $scope.company_id,
dealer : $scope.dealer,
year : $scope.year,
variant : $scope.variant,
mileage : $scope.mileage,
selling_price : $scope.selling_price,
colour : $scope.colour,
condition : $scope.condition,
branch : $scope.branch,
extras_csv : $scope.extras_csv,
description : $scope.description,
location : $scope.location,
body_type : $scope.body_type,
contact_number: $scope.contact_number,
address : $scope.address,
suburb : $scope.suburb,
province : $scope.province,
contact_tel : $scope.contact_tel,
name : $scope.name,
url1 : $scope.url1,
url2 : $scope.url2,
url3 : $scope.url3,
url4 : $scope.url4,
url5 : $scope.url5,
url6 : $scope.url6,
url7 : $scope.url7,
url8 : $scope.url8,
url9 : $scope.url9,
url10 : $scope.url10
};
}]);
答案 0 :(得分：0)
为了使您的应用程序正常工作，您需要将所有参数都显示在URL中。现在，如果您希望在社交媒体上分享更具吸引力的URL，可以使用多种用于URL缩短的在线服务。
我建议您使用google URL shortener。例如，此问题的网址相对较长：
的https：\\ stackoverflow.com/questions/46789070/ui-router-optional-parameters-create-long-not-so-friendly-url
缩短之后变为：
的https：\\ goo.gl/QhQWCz
NB：请注意我在网址中添加了反斜杠，以避免将其解释为可点击链接。
答案 1 :(得分：0)
我找到了一个适合我的解决方案，只显示我在网址中需要的参数的所有细节，同时坚持刷新。也许其他人会从中受益。
功能：
vm.detailsClick = function (car) {
vm.detailsdata = car;
$state.params.car = car;
$state.transitionTo("cardetails", {
stock_id : car.stock_id,
series : car.series,
make : car.make,
year : car.year,
company_id: car.company_id,
selling_price: car.selling_price
}, {});
};
我的状态：
.state("cardetails", {
url : "/for-sale/used/:company_id/:stock_id/:make/:series/:year/:selling_price",
params : {
car : null,
company_id : null,
stock_id : null,
year : null,
make : null,
series : null,
selling_price: null
},
resolve : {
car: function ($stateParams) {
return {
car : $stateParams.car,
stock_id : $stateParams.stock_id,
company_id : $stateParams.company_id,
make : $stateParams.make,
year : $stateParams.year,
series : $stateParams.series,
selling_price: $stateParams.selling_price
}
}
},
controller : "Details",
templateUrl: "partials/cardetails.html"
})
我的控制器：
app.controller('Details', ["$scope", "$http", "$stateParams", function ($scope, $http, $stateParams) {
function detailsFetch(company_id, stock_id, selling_price) {
var dataUrlBasePath = "you-api-url?select=*";
$http.get(dataUrlBasePath + "&company_id=eq." + $stateParams.company_id + "&stock_id=eq." + $stateParams.stock_id + "&selling_price=eq." + $stateParams.selling_price).then(function (response) {
$scope.car = response.data[0];
console.log($scope.car);
});
}
detailsFetch($stateParams.company_id, $stateParams.stock_id, $stateParams.selling_price);
}]);