在 UI-router (Angular) 中用子 url 覆盖父 url

Question

这是我用于 ui-路由器的配置：

.state('parent', {
    url: '/child1'
    controller: ParentController,
    abstract: true
})

.state('parent.child1', {
    url: ''
})

.state('parent.child2', {
    url: '/child2'
})

我想达到什么目标？

我想要一个 /child1 url，我想将其作为默认值，因此我将父级抽象为子状态 url 为 'empty'。

所以我希望当用户访问 child2 状态时，父 url 被替换而不是附加它。我怎样才能做到这一点？

Answer 1

如果我对你的理解是正确的，（如果我错了请纠正我）你正在寻找设置路由服务来实现以下路由：

/、/child1 和 /child2 并且您希望所有状态都与 ParentController

绑定

如果这是正确的，您可以通过以下方式实现：

.state('parent', {
  url: '/',
  controller: ParentController,
})

.state('parent.child1', {
  url: '^/child1'
})

.state('parent.child2', {
  url: '^/child2'
})

例如，如果我们是运行 https://localhost:3000，我们可以这样导航：

parent 或 / 会给我们 https://localhost:3000/

parent.child1 或 /child1 会给我们 https://localhost:3000/child1

parent.child2 或 /child2 会给我们 https://localhost:3000/child2

ParentController 将被所有状态调用。

在 UI-router (Angular) 中用子 url 覆盖父 url

Override the parent url with child url in UI-router (Angular)

angularjs

angular-ui-router

angularjs-routing

我想达到什么目标？