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的{{3}}文档，然后阅读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
  }
})

带角度ui-router的多个可选参数

1 个答案: