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

Question

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

状态层次结构

产品

个人

sub-cat-1

sub-cat-2

业务

sub-cat-a

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 位置值是旧 url，它会覆盖 $location.url 值并导致 urlRouter 加载旧状态而不是我们试图返回的状态。

顺序好像是:

点击返回按钮

浏览器从它的历史记录中加载上一个 url

ui-router 开始加载正确的状态(前一个状态)

在 urlRouter 上调用

更新(没有读取参数)，这会导致 $location 根据 urlRouter 位置值

重置为前退按钮状态 url

urlRouter 然后将两个 urls/states 视为不同，因此它重新加载现在由 $location.url 指定的状态，它是 pre-back 按钮 url

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

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

Answer 1

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

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

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