Question

我有一个Angular 4应用程序，使用来自@ angular / router

的路由器进行导航

导航结构非常简单，包括：

/products
/products/:productId
/products/:productId/edit-details
/products/:productId/edit-images
etc

这一切都与路由器模块完美配合。

我得到的问题是在保存数据后使用浏览器后退按钮 - 给出以下情形：

用户在＆＃34; / products / 5＆＃34;屏
用户转到＆＃34; / products / 5 / edit-details＆＃34;屏
用户进行更改并点击＆＃34;保存＆＃34;
App保存数据并将用户导航回＆＃34; / products / 5＆＃34;屏

执行上述操作后，单击“浏览器返回”按钮。我认为大多数用户都希望使用Back按钮将它们提升到＆＃34;产品列表＆＃34;但它实际上会将它们带回＆＃34; / products / 5 / edit-details＆＃34;因为那是他们所在的最后一条路线。

这可能是网站与单页应用程序中预期行为之间的一点冲突。 SPA中的外观更像是应用程序，而不是传统的网站。在大多数应用程序中，设备后退按钮用作＆＃34;向上/向后＆＃34;按钮（例如，在我的手机上使用您获得的联系人应用程序：联系人列表 - ＆gt;联系人详细信息 - ＆gt;编辑联系人 - ＆gt;保存[带您联系详细信息] - ＆gt;按后退按钮将用户带到联系人列表不要回到编辑联系人屏幕。所以用户已经接受过教育，希望从他们设备上的后退按钮获得这种行为。

我已经尝试过使用：

this.location.back();

而不是

this.router.navigate(['../'], { relativeTo: this.route });

用户点击保存后

这部分实现了我想要的东西，但这为＆＃34;转发＆＃34;留下了不必要的选择。按钮 - 绕过路由器模块似乎有点不对。

删除后，此行为尤其令人讨厌：例如如果你去＆＃34; / products /：productId / edit-images /：imageId＆＃34;并删除图像，然后不存在的路线保留在后退历史

我也尝试过使用＆＃34; skipLocationChange＆＃34;但是，这并没有达到预期的效果，就好像我在链接中使用skipLocationChange来进入＆＃34;编辑细节＆＃34;屏幕和用户然后按下后退按钮，然后绕过：productId屏幕，直接进入＆＃34; / products＆＃34;列表

有什么建议吗？

角度路由器和后退按钮

0 个答案: