vue.js - 单页应用程序路由

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

标签： vue.jsbrowserurl-routingsingle-page-applicationvue-router

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