Single Page Application (SPA) 是现代 Web 应用程序的一个广泛使用的开发模式。相对于传统的多页面应用，SPA 使用 Ajax、HTML5 动态路由等技术，使得页面无需刷新而实现动态渲染。然而，如何正确处理 SPA 中的 404 错误，成为了后备应对机制的一个必要考虑因素。
SPA 中的 404 错误
在传统的多页应用中，一旦页面出现 404 错误，只需要跳转到一个 404 页面即可。但是在 SPA 中，往往会出现一个主要问题：当路由不匹配时，以及用户随意更改 URL 时，应用程序不会像传统应用程序那样重新加载，因为早已经加载了核心单页面应用程序。因此， SPA 必须向用户返回合适的反馈。
常见的 SPA 应用程序框架，如 Vue、React 和 Angular，都提供了处理 404 错误的机制，但是这些机制并不完美。例如，在 Vue.js 中使用 vue-router 处理路由时，会渲染 NotFound 组件，但此时浏览器的地址栏并未更改，用户不能将错误链接拷贝或在另一个浏览器中打开，并且这种方法并不适用于所有情况。
使用 JavaScript 处理 404 错误
为了解决 SPA 中的 404 错误，JavaScript 具备一些处理方案，下面列举几种常见的处理方式。
1. 使用 window.onerror
window.onerror 是 JavaScript 中一个全局事件处理程序，可以捕获网页中的一些异常场景，然后调用自定义的回调函数来处理错误。这种方式比较原始，但是可行性很高。
-- -------------------- ---- -------
-------------- - --------------- ---- ----- -
-------------------
-----------------
------------------
-- -- --- --
-- ------ --- ---- ------ -- --------------------------- -
-- --- --- --
-------------------- - -------
------ -----
-
--通过 window.onerror 可以捕获完整的错误信息，然后判断是否是 404 错误，拼接错误页面 URL 后跳转到 404 页面。
2. vue-router 中定义 404 路由
在 vue-router 中定义一个特殊路由用于处理 404 请求。当路由加载不到相应组件时，跳转到 404 页面。
-- -------------------- ---- -------
----- ------ - --- --------
----- ----------
------- -
-- ---
-- --- --
-
----- ----
---------- -- -- -------------------------
-
-
---vue-router 中设置了一个特殊路由，路径为 *，如果匹配不到任何其他路由，则会自动跳转到该路由。
3. 使用 history.pushState
使用 history.pushState 可以改变当前 URL，同时还可以使用 history.replaceState 触发 popstate 事件来修改当前的 URL。
-- -------------------- ---- -------
----------------
-------------- -- ----------------
---------- -- -
-- -- --- --
-- ----- -- ----- -
-------------------------- ----- ------ -- --- --------
-------------- - ----- --- -------
----------------------- - ---- ------ ---- --- --------
- ---- -
-- ---
-
---使用该方法可以在页面中不刷新的情况下将页面 URL 修改为 404 页面。
总结
处理 SPA 中的 404 错误需要我们思虑到用户交互体验和网站 SEO 等多方面的问题。通过 JavaScript 提供的方法，我们可以合理地处理这些问题，以确保页面的稳定性和正确性，并为用户提供更好的访问体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65193bdd95b1f8cacd16ec7c