Vue Router
的 history
模式和 React Router
的 Browser
模式使用的是 HTML5
的 History API
,它允许你修改浏览器地址栏的 URL 而不发送请求到服务器。这种方式可以创建干净的 URL,没有 #
符号,看起来就像传统的服务器端路由。
然而,history
模式下的 URL 更像是传统的服务器路由,当用户直接在地址栏输入 URL
或者通过书签访问某个页面时,浏览器会向服务器发送一个请求,期望从服务器获取相应的资源。
这里的问题是,在单页应用(SPA)中,所有的“页面”实际上都是由前端 JavaScript
动态生成的,服务器上并没有对应的物理文件。如果没有正确的服务器配置,当用户尝试访问 /some/path
而不是根路径时,服务器会找不到对应文件,从而返回 404 错误。
为了防止这种情况,服务器需要被配置为在接收到任何未知路径的请求时,都返回 SPA 的入口 HTML 文件(通常是 index.html
)。这样,前端 JavaScript 才有机会接管路由,解析 URL 并渲染正确的页面。