ui-router Go 创建双路径元素

Question

我在我的 Angular Meteor 项目中使用 UI-Router。 当我在路由 /search 并想重新定位到 /search/:term（例如 /search/starwars）并在我的控制器中使用时

$state.go( 'private.search.feed', { term: 'starwars' } )

然后它在我的浏览器中的 URL 变成 /search/search/starwars 而不是 /search/starwars。

我的路线设置（我有 2 个布局，因此是抽象视图）

$stateProvider

  # abstract views / layout
  .state 'private',
    url: ''
    abstract: true
    views:
      'app':
        templateUrl: 'client/views/layouts/privateLayout.html'

  .state 'public',
    url: ''
    abstract: true
    views:
      'app':
        templateUrl: 'client/views/layouts/publicLayout.html'

  # end abstract views / layout

  .state 'private.home',
    url: '/'
    views:
      "container@private":
        templateUrl: 'client/views/home/home.html'


  .state 'private.search',
    url: '/search'
    views:
      "container@private":
        templateUrl:  'client/views/search/search.html'
        controller:   'searchCtrl'

  .state 'private.search.feed',
    url: '/search/:term'
    views:
      "container@private":
        templateUrl:  'client/views/search/feed/feed.html'
        controller:   'searchCtrl'

当我改变路线时

.state 'private.searchFeed',
    url: '/search/:term'
    views:
      "container@private":
        templateUrl:  'client/views/search/feed/feed.html'
        controller:   'searchCtrl'

并调用

$state.go( 'private.searchFeed', { term: 'starwars' } )

网址正确。

我认为我在第一个设置中定义了一个子状态，但我不明白为什么它会在 URL 中重复 search。

有什么想法吗？

Answer 1

你的private.search.feed state url 应该是'/:term'，因为父 state 的 URL 在从它派生的 state 中继承。由于您的派生状态必须类似于 /:term，因此显然将通过 /search/:term 变为/可访问

代码

.state 'private.search.feed',
    url: '/:term'
    views:
      "container@private":
        templateUrl:  'client/views/search/feed/feed.html'
        controller:   'searchCtrl'

Answer 2

在状态名称中使用 dot 向 ui-router 表明它是 dotpath 定义的任何状态的 子状态时间>。例如：

State 1: home (/home)
State 2: home.dashboard (/home/dashboard)
State 3: home.dashboard.settings (/home/dashboard/settings)

您不能创建一个名为home.dashboard.settings.save 的新状态State 4，其路由不以 State 3 的 URL 开头，如 State 4 em> 的 dotpath 表示它应该继承自 State 3。

因此您需要确保子状态的 URL 不会重复其父状态的 URL：

.state 'private.search.feed',
    url: '/:term'