随着 Web 技术的发展，越来越多的网站采用单页面应用（SPA）架构，即使用 JavaScript 对网页进行动态生成，实现无需刷新页面的交互效果，提高用户体验。但是，SPA 应用在面对用户请求的路由不存在时，就会出现 404 页面，这个错误页面对用户来说非常不友好，本文将介绍如何在 SPA 应用中处理 404 页面。
404 页面的问题
在传统的多页面应用中，当用户访问一个不存在的页面时，Web 服务器会直接返回一个 404 响应，由浏览器展示默认的 404 页面。而对于 SPA 应用来说，应该先匹配 URL 是否存在于路由配置中，如果匹配不到才返回 404 页面。
但是，由于 SPA 应用使用 JavaScript 进行动态生成，页面中的资源文件都是异步加载，但是 404 页面需要在一开始就加载，如果不考虑异步加载问题，会出现页面加载不全的情况。通常来说，这个问题可以通过 Webpack 的代码分割（Code Splitting）解决，即将 404 页面代码单独打包成一个文件。
处理 404 页面的方案
对于 SPA 应用中的 404 页面，通常有以下几种处理方案：
方案一：提供默认的 404 页面，并使用路由重定向
这个方案的核心思想是将 SPA 应用中的所有路由都重定向到一个 404 页面上，当用户请求的路由不存在时，就会展示这个默认的 404 页面。
示例代码：
-- -------------------- ---- -------
-- ---------
------ -------- ---- ----------------------
----- ------ - --- -----------
----- ----------
------- -
-- --------
-
----- ----
---------- --------
-
-
--上面代码中，'*'代表所有路由都匹配，NotFound就是默认的 404 页面组件。
优点
- 这种方案实现比较简单，不容易出现问题。
- 对于用户态度比较宽容的产品，可以用一个通用的 404 页面来应对大部分情况。
缺点
- 这个方案的缺点是通用性比较强，可能无法针对每一种错误情况提供特定的错误处理页面，对用户体验的积极影响并不大。
- 由于所有路由均被重定向到默认的 404 页面上，页面加载不必要的资源文件，会降低性能。
方案二：动态加载 404 页面
这个方案的核心思想是将 SPA 应用中的所有路由都指向同一个页面，在页面通过判断路由信息，动态加载对应的页面组件。
示例代码：
-- -------------------- ---- -------
-- ---------
------ - ------- - ---- ------
----- ------ - --- -----------
----- ----------
--------- -----
------- -
-
----- -------
---------- -- -- ------------------------------
--
-- --------
-
----- ----
---------- -- --
---------------------------------------------- --
------------------ -------------------
-
-
-
--上面代码中，component选项指向的是一个没有使用命名的函数，函数返回一个 promise，在这个 promise 的 then 方法中进行路由判断，将对应的路由记录到window.__pargma_notfound__ 变量中，用于后续的错误页面加载。
-- -------------------- ---- -------
-- -------
----------
---- ------------------
---------- --------------- --
------
-----------
--------
------ ------- -
------ -
------ -
---------- ----
-
--
--------- -
--------------------
--
-------- -
--------------- -
----- -------- - ----------------------------- -- -------------------------
------------------------------------------
--------------- -- -
-------------- - ----------------- -- ---------
--
-------- -- ---
-
-
-
---------404 页面组件中，下面代码实现了异步加载对应的页面组件，通过 import()方法获取对应的组件路径。这里需要注意的是，组件路径因为没有Extension，所以要动态处理，这个处理可以通过 webpack 配置解决。
优点
- 这种方案实现了 404 页面的动态加载，不会浪费不必要的资源文件，对性能的影响相对较小。
- 能够根据路由信息来加载对应的错误页面，更加个性化，方便用户。
缺点
- 实现起来比较复杂，容易出错。
总结
SPA 应用中的 404 页面，对于用户体验来说非常重要。本文介绍了两种解决方案，提供了详细的代码示例，大家可以根据自己的需求选择适合的处理方式。
总体来说，方案二比方案一更加灵活，能够针对不同的错误情况提供个性化的处理方式，但是实现过程比较复杂。而方案一相对比较简单，能够满足大部分需求，但是可能对用户体验产生负面影响。根据自己的实际情况，在这两种方案中进行选择和平衡。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6451b169675af4061b57a85f