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

Question

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

基本上，当我在某条$route并且我做了某个$state.go(routeName, params); ，我需要在网址上附加一个parameter或多个parameters 。

另外，要注意路径也可以在没有参数的情况下访问，因此它必须是干净的。

我想实现这个结果：

• 实际网址： localhost:4000
• 通缉网址： localhost:/4000/myRoute/myStuff/myParam
• 避免： localhost:/4000/myRoute// $state.go(myRoute) 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路由

我找不到任何解决方案也在寻找在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所说，你可以创建一组特定的子路由。

您需要编辑$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' });