即使状态改变，URL 也不会改变.`用户界面路由器` [英] URL is not changing even after the state is changed . `ui-router`

问题描述

我正在使用 ui-router 和状态提供程序来路由我的应用程序中的页面.我有以下状态提供者写的状态.

.state('home', {网址:'/家'，templateUrl: 'public/msStream/stateFiles/stateHome.html',控制器:'stateHomeController'}).state('home.profile', {url: '/home/profile',templateUrl: 'public/msStream/views/setting/ProfileBody.html'})

当我处于 home 状态时./home 添加到我的 URL 中，但是当我使用 $state.go("home.profile) 切换到 home.profile 状态时，我的 URL 没有更改为 /home/profile 但添加到 templateurl 中的 HTML 页面相同状态正在呈现在前面.

我尝试在状态的 URL 中添加 /profile 和 /home/profile 但似乎没有任何效果.我在这里错过了什么?

解决方案

我在这里创建了工作plunker

父子状态确实继承了很多.除其他外，还有 url.所以我们不应该将来自父级的 url 部分用于子级.

$stateProvider.state('家', {网址:'/家'，templateUrl: 'public/msStream/stateFiles/stateHome.html',控制器:'stateHomeController'}).state('home.profile', {//这里//而不是这个//url: '/home/profile',//我们需要这个网址:'/个人资料'，templateUrl: 'public/msStream/views/setting/ProfileBody.html'})

同样非常重要的注意事项 - 父级必须为其子级包含锚点/目标/ui-view:

public/msStream/stateFiles/stateHome.html

<h2>这是家</h2>儿童占位符:<小时/><div ui-view=""></div>

这里最重要的是 <div ui-view=""></div> - 子视图的占位符(未命名)>

在操作中检查它此处

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?

解决方案

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

这篇关于即使状态改变，URL 也不会改变.`用户界面路由器`的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！