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