Ui-Router可选参数创建时间不那么友好url

Question

我的ui-router可选参数创建一个不太友好的长url，如何在保留我的参数的同时缩短url。我需要能够通过社交媒体分享这个网址，做SEO友好。

如果我在我的状态中从我的url中删除了一些参数，它仍会通过我的视图显示正确的数据，但只刷新显示包含在我的url中的参数中的数据。

我的链接：

<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 
    }; 
}]); 

Answer 1

为了使您的应用程序正常工作，您需要将所有参数都呈现在URL中。现在，如果您希望在社交媒体上分享更吸引人的网址，则可以使用几种网址缩短联机服务。我建议你使用google URL shortener。例如这个问题有一个比较长的URL：

的https：\\ stackoverflow.com/questions/46789070/ui-router-optional-parameters-create-long-not-so-friendly-url

缩短之后，就变成了：

的https：\\ goo.gl/QhQWCz

NB：请注意，我已将反斜杠添加到网址以避免将它们解释为可点击的链接。

Answer 2

我发现一个解决方案，为我工作，显示所有的细节，只有我需要在我的网址，同时坚持刷新的参数。也许其他人会从中受益。

功能：

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); 
}]);