帶角度ui-router的多個可選參數

Question

我試圖使用ui-router多個可選參數但它似乎不起作用。 以下是我做的測試：

單個參數可以

state.url       url called     state param values

/page/:x        /page/         $stateParams.x == ""
/page/:x        /page/2        $stateParams.x == "2"

一個可選參數是OK

/page/:x?       /page/         $stateParams.x == ""
/page/:x?       /page/2        $stateParams.x == "2"

兩個參數都可以（除了第一種情況下丑陋的雙斜線， /page和/page/轉到/page// 。但是因為參數不是可選的，所以沒問題）

/page/:x/:y     /page//        $stateParams.x == "" && $stateParams.y == ""
/page/:x/:y     /page/2        $stateParams.x == "" && $stateParams.y == ""
/page/:x/:y     /page/2/       $stateParams.x == "2" && $stateParams.y == ""
/page/:x/:y     /page/2/3      $stateParams.x == "2" && $stateParams.y == "3"

兩個可選參數表現很奇怪。 第二個參數總是未定義的，當我指定第二個參數時，它不能解決第一個參數。

/page/:x?/:y?   /page/         $stateParams.x == "" && $stateParams.y == undefined
/page/:x?/:y?   /page/2        $stateParams.x == "2" && $stateParams.y == undefined
/page/:x?/:y?   /page/2/       $stateParams.x == "" && $stateParams.y == undefined
/page/:x?/:y?   /page/2/3      $stateParams.x == "" && $stateParams.y == undefined

Answer 1

未通過修改URL指定UI-Router可選參數。 相反，它們是使用狀態定義中的params對象指定的。

聲明url: '/page/:x?/:y?' 不會將x和y標記為可選參數。 相反，問號用於分隔URL的URL和Query Param部分。

閱讀UrlMatcher文檔中的描述文本和url的$ stateProvider.state文檔，然后閱讀params 。

你最終會得到如下配置的可選參數：

$stateProvider.state('page', {
  url: '/page/:x/:y',
  params: { 
    x: 5,  // default value of x is 5
    y: 100 // default value of y is 100
  }
})