Question

我有ui-router的配置如下：

.state('xxx.components',{
            url: '/:runId/component',
            reloadOnSearch: false,
            templateUrl: '/modules/xxx//views/cloud-components/templates/cloud-components.tpl.html',
            controller: 'CloudComponentsCtrl',
            controllerAs: 'ctrl'
        })

如果我在没有任何runId的情况下进入组件页面，则url将如下所示：

http://localhost:3031/xxx/run-topologies//component

它会在网址中包含双斜杠，我希望它只包含一个斜杠，如下所示，我该怎么做才能解决这个问题？

期待行为：

with runId：（由于当前配置，这是正确的）

http://localhost:3031/xxx/run-topologies/6/component

没有runId：（应该只有1个斜杠）

http://localhost:3031/xxx/run-topologies/component

Answer 1

你问的是不可能的AFAIK。但是，您可能会对两种路径使用CloudComponentsCtrl感兴趣的方法有两种。

使用不带runId的网址定义单独的状态

.state('xxx.components',{
    url: '/component',
    reloadOnSearch: false,
    templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
    controller: 'CloudComponentsCtrl',
    controllerAs: 'ctrl'
})
.state('xxx.componentsForRunId',{
    url: '/:runId/component',
    reloadOnSearch: false,
    templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
    controller: 'CloudComponentsCtrl',
    controllerAs: 'ctrl'
})

从路线中删除runId并将其作为查询参数包含。

.state('xxx.components',{
    url: '/component?runId',
    reloadOnSearch: false,
    templateUrl: '/modules/xxx/views/cloud-components/templates/cloud-components.tpl.html',
    controller: 'CloudComponentsCtrl',
    controllerAs: 'ctrl'
})

然后，您可以从$stateParams。

希望这能以某种方式解决您的问题。

角度ui-router动态参数双斜线

1 个答案: