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

Question

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

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

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

我想达到这样的效果：

实际 Url：localhost:4000
求购Url：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\/'

但都导致相同的 url 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

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

Answer 3

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

您需要像这样编辑您的 $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'
          . . .
})

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

分别与$state.go的：

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

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

Use "/" as Optional Separator for Parameters in Url - Angular-Ui-Router

javascript

routing

angularjs

angular-routing

angular-ui-router