URL is not changing even after the state is changed . `ui-router`

问题

I am using ui-router and state provider to route the pages in my application. I have following states written in state provider.

.state('home', {
        url: '/home',
        templateUrl: 'public/msStream/stateFiles/stateHome.html',
        controller: 'stateHomeController'
    })

.state('home.profile', {
        url: '/home/profile',
        templateUrl: 'public/msStream/views/setting/ProfileBody.html'
      })

When I am in home state. /home is added in my URL, but when I switch to home.profile state using $state.go("home.profile), my URL is not changing to /home/profile but HTML page added in templateurl of the same state is getting rendered on front.

I tried adding /profile and /home/profile in the URL of the state but nothing seems to work. What am I missing here?

回答1:

I created working plunker here

The paren-child states do inherit a lot. Among other things, also the url. So we should not use for child the url part coming from parent.

$stateProvider
  .state('home', {
    url: '/home',
    templateUrl: 'public/msStream/stateFiles/stateHome.html',
    controller: 'stateHomeController'
  })
  .state('home.profile', {
    // HERE
    // instead of this
    // url: '/home/profile',
    // we need this
    url: '/profile',
    templateUrl: 'public/msStream/views/setting/ProfileBody.html'
  })

Also very improtant note - parent must contain anchor/target/ui-view for its child:

public/msStream/stateFiles/stateHome.html

<div>
  <h2>this is the home</h2>

  placeholder for child:
  <hr />

  <div ui-view=""></div>
</div>

The most important here is the <div ui-view=""></div> - a placeholder for child view (unnamed)

Check it in action here

来源：https://stackoverflow.com/questions/27920991/url-is-not-changing-even-after-the-state-is-changed-ui-router

标签

angularjs

angular-ui-router