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

我遇到了一个棘手的问题，我无法在一段时间内解决。

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

另外，请注意以下事实:也可以不带任何参数访问路线，因此路线必须整洁。

我想达到这个结果:

实际网址: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\/'

但是所有这些都导致相同的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')也会导致同样的结果。

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

对于任何澄清，只需发表评论。
提前致谢。

最佳答案

您无需制造所有此类机械即可实现所需的功能。正如@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' });