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 是正确的。

我想我在第一个设置中定义了一个子状态，但我不明白为什么它会在 URL.

中重复 search

有什么想法吗？

Answer 1

你 private.search.feed 状态 url 应该是 '/:term' 因为父状态的 URL 在从它派生的状态中继承。由于您的派生状态必须像 /:term 显然 become/accessible 通过 /search/:term

代码

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

Answer 2

在州名中使用点表明 ui-router 它是任何州的子州由 点路径 定义。例如：

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

您不能创建名为 home.dashboard.settings.save 的新州 州 4，其路线不以给定 州 3 的 URL 开头，因为State 4的dotpath表示应该继承自State 3 .

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

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

ui-router Go 创建双路径元素

ui-router Go creates double path element

javascript

routing

angularjs

angularjs-routing

angular-ui-router