如何在单页应用程序中返回带有书签的 hash-bang URL？答案

【问题标题】：How to return to bookmarked hash-bang URLs within a single page application?如何在单页应用程序中返回带有书签的 hash-bang URL？
【发布时间】：2018-05-13 10:12:17
【问题描述】：

我了解 HTML5 History API 以及它如何支持单页应用程序 (SPA) 中的后退和前进按钮。

但是鉴于 API 显示的 URL，当通过书签或电子邮件 URL 提供虚假 URL 时，我如何返回应用程序状态？比如……

如果我的 SPA 从 http://dacracot.org/myApp 加载，用户可以四处导航，直到 URL 变形为 http://dacracot.org/myApp#!ec2f209f25e11。用户决定他们希望从现在开始将其作为他们在 SPA 中的起点并为其添加书签。此外，他们认为这对他们的同事来说是一个很好的起点，并将 URL 通过电子邮件发送给他们。

所以当我的 SPA 加载时，我可以捕获 hash-bang 标记 #!ec2f209f25e11，但现在怎么办？我有什么机制可以让他们处于他们期望的相同点击流中？我是否必须为每个显示选项创建一个路由表？这（我希望）不是我唯一的选择。

【问题讨论】：

用户第一次导航到该哈希/URL 时您做了什么？现在做同样的事情......
Hashbangs 是人们在 pushState 和朋友存在之前使用的东西。我不明白你为什么要混合它们。
@Quentin pushState 是暂时的，对存储的 URL 没有帮助。
@dacracot — URL 应该告诉您该状态是什么。这就是 URL 的意义所在。（进入该状态所遵循的特定点击集应该不重要）。
好吧，如果您还没有在 state 和 URL 之间建立适当的关联，那么这是您需要完成的第一件事。

标签： javascript html single-page-application html5-history hashbang

【解决方案1】：

我必须为每个显示选项创建一个路由表吗？

或多或少。

由于片段标识符仅在客户端可用，因此您需要客户端逻辑可以使用 URL 来确定当用户请求加载页面时页面应处于的状态。

【讨论】：

如果为真，那么我需要一个来自我的 SPA 中每个潜在显示状态的#tag 和一个路由表，以便在返回时执行它。无赖。