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

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

本文关键字：参数 Angular-Ui-Router 分隔符 Url 作为 使用      更新时间：2023-09-26

我有一个棘手的问题，我不能在一段时间内解决

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

还要注意的是，路由也可以不带任何参数访问，所以它必须是干净的。

我想达到这个结果:

  • 实际网址:localhost:4000
  • 通缉地址:localhost:/4000/myRoute/myStuff/myParam
  • 如果没有提供参数的$state.go(myRoute)，则避免使用:localhost:/4000/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')也会导致同样悲惨的结果。

  • 使用这种分隔符的正确方法是什么，避免在没有参数的情况下附加它，并且也可以正确渲染?

如有任何澄清，请留下评论。

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

你不需要制造所有这些机器来实现你想要的。正如@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's:

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

不能创建一个母路由和一个子路由吗?这难道不可能吗?

相关文章：