谁能用 ui-router 和后退按钮解释意外的状态转换？

Question

我正在使用带有嵌套状态/视图的 ui-router，但后退按钮有问题。

状态层次结构

• 产品
  • 个人
    • sub-cat-1
    • sub-cat-2
  • 业务
    • 子目录
    • sub-cat-b
• 搜索

问题

我最初以product.business.sub-cat-a 状态加载页面。顶层页面有一个搜索输入表单，使用该表单时，会导致状态转换为状态search（通过调用$state.go()），一切正常。

但是，如果我单击后退按钮，我会看到从search 到product.business.sub-cat-a 的状态转换按预期（通过调用$state.transitionTo()），但随后又调用了$state.go() 返回声明search，我不知道这个电话是从哪里来的。

如果有人能阐明 ui-router 正在做什么，将不胜感激

更新

我已将问题追溯到urlRouter 和$location 之间的交互。似乎$urlRouter.update 有时会将 stat 中定义的 url 推送到 $location 并且有时会从 $location 中提取值。

在这种情况下，当出现问题时，urlRouter 位置值是覆盖 $location.url 值并导致 urlRouter 加载旧状态而不是我们试图返回的状态的旧 url到。

顺序好像是：

1. 点击返回按钮
2. 浏览器从其历史中加载上一个网址
3. ui-router 会加载正确的状态（之前的状态）
4. 在urlRouter 上调用更新（没有读取参数），这会导致$location 根据 urlRouter 位置值重置为预返回按钮状态 url
5. urlRouter 然后将两个 url/状态视为不同，因此它重新加载现在由 $location.url 指定的状态，这是预返回按钮 url

所以问题似乎是urlRouter 位置值在上面的步骤 3 中更新状态时没有更新。

任何 ui-router/angular 专家，请随时为我指明正确的方向。

Answer 1

对于遇到类似问题的任何人，这里的问题是当按下后退按钮时，会触发两个状态转换。第一个是由后退按钮产生的正确的；第二个是与父（业务）状态相关联的 $state.go()，如上面的层次结构所示。

在解决resolve 步骤生成的承诺之前处理了第二个转换。这意味着urlRouter 的位置在随后的$urlRoute.udpate() 调用之前尚未更新，因此路由器重新加载了原始页面。

希望这可以帮助其他人节省一天的调试时间:-)