【问题标题】：Routing in a single page app(spa) without framework, just javascript在没有框架的单页应用程序（spa）中路由，只有 javascript
【发布时间】：2021-01-11 20:03:15
【问题描述】：
我正在尝试使用 html、css 和 javascript 制作单页应用程序。我想为它添加一些路由。我用 nodejs 和 express 制作了服务器端渲染的网站。如何为我的 SPA 创建路由系统？我们可以使用 express 进行客户端路由吗？如果没有，是否有任何替代方案可以表达客户端路由？
【问题讨论】：
标签：
javascript
routes
single-page-application
【解决方案1】：
如果您不想使用框架/库来构建 SPA，您有两种选择
- 使用 JS 路由库 ex:navigo，自己没试过 TBH
- 自己构建
要构建自己的简单 SPA 路由，首先，您需要：
- 定义路由配置，每个路径都带有要加载的相关组件/元素/内容
- 定义路由根，即注入内容的元素
那么你有两个选择：
- 使用带有窗口popstate事件的#哈希路径（例如：domain.com/#/messages），因此您可以通过获取哈希路径并决定在根中注入哪些内容来处理此事件，检查此@987654323 @了解有关他的方法的更多详细信息
- 使用普通路径（例如：domain.com/messages）实施自定义路由，这需要更多的努力，为了实现这一目标，您需要：
- 实现您的自定义导航链接，您需要防止默认的导航行为，并使用您的自定义逻辑手动进行导航
- 使用History API，（例如pushState）来控制位置状态和历史堆栈
- 调整您的服务器配置以始终加载 index.html
- 使用Location API 添加您的自定义逻辑以手动管理这些重定向，即。当用户打开 domain.com/messages 时，它会打开 index.html，然后您需要手动检查 /messages 路径要加载的内容并将其注入根元素中
请在开始之前了解每个选项所需的时间、精力、可靠性、可维护性！