单页应用程序路由

Question

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

Answer 1

在Vue Router中（我假设其他库/框架相同），这是通过HTML5 history API（pushState()，replaceState()和popstate）实现的，您可以操纵浏览器的历史记录，但不会导致浏览器重新加载页面或寻找资源，从而使UI与URL保持同步。

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

history.pushState({urlPath:'/some/page/on/stackoverflow'},"",'/some/page/on/stackoverflow')

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

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

Vue Router's HTML5 History Mode

React Router's <BrowserRouter>

Answer 2

<块引用>

浏览器如何知道何时向服务器请求资源以及 何时向单页应用程序询问由 路由器？

SPA 框架使用路由库。

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

这是一个answer that discribes this behaviour with a clear scenario