带角度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"

两个参数都OK了(除了在第一种情况下丑陋的双斜线,/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文档中的描述文本和$ stateProvider.state文档url,然后阅读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
  }
})