单页应用程序路由

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的应用所在的页面。