使用“/”作为 URL 中参数的可选分隔符 - Angular-Ui-Router

Question

我有一个棘手的问题，我有一段时间没能解决。

本质上，当我在某个$route 上并执行某个$state.go(routeName, params); 时，我需要将某个parameter 或多个parameters 附加到url。

另外，注意路由也可以不带参数访问，所以一定要干净。

我想达到这个结果：

• 实际网址：localhost:4000
• 想要的网址：localhost:/4000/myRoute/myStuff/myParam
• 避免：localhost:/4000/myRoute// 如果提供了不带参数的 $state.go(myRoute)。

例如：

$state.go(myRoute, {
   param1 : 'myStuff',
   param2 : 'myParam'
});

function myRoute($stateProvider) {

    $stateProvider
        .state('myRoute', {
            url: 'myRoute/{param1}{param2}',
            parent: 'myParent'
              . . .
        })
}

会工作，但给localhost:/4000/myRoute/myStuffmyParam。

所以，我尝试使用 / 作为分隔符 url: 'myRoute/{param1}' + '/' + '{param2}' 它工作得很好，我得到localhost:/4000/myRoute/myStuff/myParam。

当然，即使没有参数，/ 也会被附加。 例如，$state.go('myRoute') 会导致localhost:/4000/myRoute// 这显然是错误的。

那么，现在，我告诉自己，好吧，也许我只要把它添加到param1，我就能达到我所需要的。

所以，我尝试了

• param1 : 'myStuff' + '/'
• param1 : 'myStuff' + '\/'
• param1 : 'myStuff/'
• param1 : 'myStuff\/'

但都指向相同的网址localhost:4000/myRoute/myStuff~2FmyParam。 同时，如果我使用另一个分隔符，例如 -，它就可以正常工作。

param1 : 'myStuff-' 导致localhost:4000/myRoute/myStuff-myParam

编辑

使用{param} 和:param 是一样的。参考angular-ui/ui-router URL Routing

在查看way to create optional parameter in url? 提供的答案时，我也找不到任何解决方案。尝试myRoute[/:param1[/:param2]] 也会抛出错误。

编辑

同样尝试param1%2F 或'param1' + '%2F' 也行不通。 我分别得到~2F & %252f 作为分隔符。同样执行decodeURI('%2F') 会导致同样悲惨的结果。

• 使用这种分隔符的正确方法是什么，避免在没有参数时附加它并正确呈现？

如有任何澄清，请发表评论。 提前致谢。

Answer 1

$stateProvider.state('state', {
    url: "/state/:id/:name/:something",
    templateUrl: "bla.html",
    controller: 'BlaCtrl'
  });

$state.go('state', {id: 1, name: 'pepe', something: 'nothing'});

这对我有用，产生：/state/1/pepe/nothing

Answer 2

你不需要制造所有这些机器来实现你想要的。正如@tricheriche 所说，您可以创建一组特定的子路由。

您需要编辑您的$routeProvider，例如：

//for the clean url - localhost:/4000/myRoute/
$stateProvider
    .state('myRoute', {
        url: 'myRoute/',
        parent: 'myParent'
          . . .
})
//for myStuff/param1 url - localhost:/4000/myStuff/param1
$stateProvider
    .state('myRoute.myStuff', {
        url: 'myStuff/{param1}', //also adding other params
        parent: 'myRoute'
          . . .
})

如果需要，您可以添加任意数量的孩子。

分别用 $state.go 的：

• $state.go('myRoute');
• $state.go('myRoute.myStuff', { param1 : 'HeyOhLetsGo' });

Answer 3

你不能创建一个母路由和一个子路由吗？这不可能吗？