在没有框架的单页应用程序（spa）中进行路由，只需 javascript

Question

我正在尝试使用 html、css 和 javascript 制作单页应用程序。我想为其添加一些路由。我用nodejs和express制作了服务器端渲染的网站。如何为我的 SPA 创建路由系统？我们可以使用express进行客户端路由吗？如果没有，是否有其他方法可以表达客户端路由？

Answer 1

如果您不想使用框架/库来构建 SPA，您有两个选择

1. 使用 JS 路由库 ex: navigo，我自己没有尝试过 TBH
2. 自己构建它

要构建您自己的简单 SPA 路由，首先，您需要：

• 定义路由配置，每个路径都有要加载的相关组件/元素/内容
• 定义您的路由根，即您将在其中注入内容的元素

那么你有两个选择：

1. 将 # 哈希路径（例如：domain.com/#/messages）与窗口popstate事件一起使用，因此您可以通过获取哈希路径来处理此事件并决定在根中注入哪些内容，请检查此答案以获取有关其方法的更多详细信息
2. 使用正常路径（例如：domain.com/messages）实现自定义路由需要付出更多努力，并且要实现这一目标，您需要：

• 实现自定义导航链接，您需要阻止默认的导航行为，并使用自定义逻辑手动执行导航
• 使用History API（例如pushState）来控制位置状态和历史堆栈
• 调整服务器配置以始终加载index.html
• 使用Location API添加自定义逻辑来手动管理这些重定向，即 当用户打开domain.com/messages时，它将打开index.html，然后您需要手动检查/messages路径加载的内容并将其注入根元素中

在开始之前，请注意每个选项所需的时间、精力、可靠性、可维护性！