单页应用程序路由

Posted 2023-02-22

【中文标题】单页应用程序路由

【英文标题】：Single Page Application Routing

【发布时间】：2019-03-05 19:17:48

【问题描述】：

现代单页应用程序使用的路由机制不必依赖片段或额外的 url 参数，而只需利用 url 路径。浏览器如何知道何时向服务器请求资源以及何时向单页应用程序请求由路由器控制的 spa 页面？是否有浏览器 API 可以接管对 url 处理的控制，然后由例如vue-router 或其他路由 spa 库？

【问题讨论】：

我真的不知道为什么这被否决了。这是一个合理的问题！

【参考方案1】：

在 Vue 路由器中（我假设其他库/框架是相同的）这是通过 html5 history API（pushState()、replaceState() 和 popstate）实现的，它允许您操纵浏览器的历史记录但赢了'不会导致浏览器重新加载页面或寻找资源，保持 UI 与 URL 同步。

例如，观察在浏览器控制台中输入此命令时地址栏会发生什么情况

history.pushState(urlPath:'/some/page/on/***',"",'/some/page/on/***')

新 URL 甚至会添加到您的浏览器历史记录中，因此如果您离开该页面并返回该页面，您将被定向到新 URL。

当然，所有这些 URL 在服务器上都不存在。因此，为了避免在用户尝试直接访问不存在的资源时出现 404 错误问题，您必须添加一个后备路由，该路由重定向到您的应用所在的 index.html 页面。

Vue Router's HTML5 History Mode

React Router's <BrowserRouter>

【参考方案2】：

浏览器如何知道何时向服务器请求资源以及 何时向单页应用程序请求由 a 控制的 spa 页面 路由器？

SPA 框架使用路由库。

假设您的 javascript 应用程序已加载到浏览器中。当您导航到在您的 routes 数组中定义的路由时，该库会阻止对服务器的 http 调用并在您的 javascript 代码中内部处理它。否则，调用将作为 GET Http 请求转发到服务器。

这是answer that discribes this behaviour with a clear scenario