Question

我有一个运行UI-router（0.2.13）的Angular（1.2.1）应用程序，以及以下状态结构：

$stateProvider.state('home', {
        template: "<div home></div>",
        url: '/'
    }).state('home.geo', { 
        url:'/geo/{geo}' 
}

从父级转换为子级或具有不同{geo}参数值的子级之间的转换按预期方式工作。从子节点转换为父节点 - 即模板和$ state.current的内容按预期更改 - 但URL不会在浏览器中更新。

要明确一个例子：我在/geo/california，然后点击一个带有ui-sref='home'的按钮。我已确认已在按钮上放置了正确的href='#/'，然后单击该按钮会导致$状态转换回主页状态，但/geo/california仍保留在我的地址栏中。

我在这里缺少什么？

更新以重新定位@ UlukBiy的评论：不，home在其模板中没有ui-view。 ui-view位于其父模板中：整体结构为：

<body> 
   <div app-nav></div>
   <div ui-view></div>
</body>

因此home指令被插入到ui-view中，但它不包含自己的ui-views。那是我的问题吗？我是UI路由器的新手，并且假设当我发布这个时，对于状态与指令的作用有一些低级别的误解。如果是这样，请帮我纠正。

Answer 1

此方案应该有效。有a working example （点击蓝色按钮右上方在单独的窗口中运行示例，显示地址栏）

我更新了你的状态def：

$stateProvider
  .state('home', {
      url: "/",
      template: 'Home view <hr /> Geo view: <div ui-view></div>',
  })
  .state('home.geo', {
      url:'^/geo/{geo}',
      templateUrl: 'tpl.html',
  })

所有这些链接都按预期工作：

<a href="#/home">
<a href="#/geo/california">
<a href="#/geo/czechia">

<a ui-sref="home">
<a ui-sref="home.geo({geo:'california'})">
<a ui-sref="home.geo({geo:'czech'})">

因此，这里最重要的变化是对于子状态我们应该使用这个URL：

url:'^/geo/{geo}',

而不是url:'/geo/{geo}'。检查文档：

Absolute Routes (^)

如果您想要绝对网址匹配，则需要在网址字符串前加上一个特殊符号'^'。

检查工作示例here

在UI路由器中从子状态转换为父状态时更新URL

1 个答案:

Absolute Routes (^)