在单页应用开发中，由于所有的路由都是在前端进行处理，因此在用户访问不存在的页面时，需要前端进行 404 页面的处理。本文将介绍 SPA 单页应用中如何处理 404 页面，并提供示例代码。
404 页面的处理方式
在 SPA 单页应用中，404 页面的处理方式一般有两种：
- 路由重定向
- 显示自定义的 404 页面
路由重定向
路由重定向是指当用户访问不存在的页面时，将其重定向到一个已存在的页面。这种方式可以让用户无感知地进入到其他页面，提高用户体验。
在 Vue.js 中，可以通过 router 对象的 addRoutes 方法动态添加路由，将不存在的路由重定向到一个已存在的路由上。示例代码如下：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
---------- --------
--
-
----- ---------
---------- ---------
-
-
--
-- -------
------------------
- ----- ---- --------- --- -
--上述代码中，我们通过 addRoutes 方法添加了一个名为 * 的路由，将所有不存在的路由重定向到根路由 / 上。
显示自定义的 404 页面
显示自定义的 404 页面是指当用户访问不存在的页面时，显示一个自定义的页面，告诉用户该页面不存在。这种方式可以让用户清楚地知道当前访问的页面不存在，提高用户体验。
在 Vue.js 中，可以通过创建一个名为 NotFound 的组件来实现自定义的 404 页面。示例代码如下：
-- -------------------- ---- -------
----------
-----
------- --- ----------
--------- --- ---- --- --- ------- --- ---- --- ----------
------
-----------
--------
------ ------- -
----- ----------
-
---------上述代码中，我们创建了一个名为 NotFound 的组件，用于显示 404 页面的内容。
然后，在路由配置中添加一个名为 * 的路由，将其指向 NotFound 组件。示例代码如下：
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
---------- --------
--
-
----- ---------
---------- ---------
--
-
----- ----
---------- --------
-
-
--上述代码中，我们将名为 * 的路由指向 NotFound 组件，当用户访问不存在的路由时，将会显示该组件。
总结
在 SPA 单页应用中，处理 404 页面可以通过路由重定向或者显示自定义的 404 页面来实现。以上两种方式均可以提高用户体验，开发者可以根据项目需求选择合适的方式进行处理。
示例代码：https://codesandbox.io/s/spa-404-page-example-3p1r1
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65dfd7611886fbafa4d05696