单页应用程序路由

Question

现代单页应用程序使用路由机制，不必依赖于片段或其他URL参数，而是简单地利用URL路径。浏览器如何知道何时向服务器请求资源，何时向由路由器控制的spa-page单页应用程序请求资源？是否存在浏览器API可以接管URL处理的控制权，然后由vue-router或其他路由SPA库接手？

- paweloque

---

我真的不知道为什么这个问题被踩了。它是一个合法的问题！ - Husam Ibrahim

Answer 1

在Vue Router中（我认为其他库/框架也是如此），这通过使用HTML5历史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的HTML5 History Mode React Router的

- Husam Ibrahim

Answer 2

当浏览器需要获取资源时，它如何知道是向服务器请求还是向由路由控制的单页应用程序请求？单页应用程序框架使用路由库。假设您的 JavaScript 应用已在浏览器中加载。当您导航到路由数组中定义的路由时，该库会阻止向服务器发出 HTTP 请求并在您的 JavaScript 代码中内部处理它。否则，该请求将作为 GET Http 请求转发到服务器。这里有一个描述此行为的清晰场景的答案。

- mehdi Ichkarrane