在 Vue.js 单页面应用（SPA）开发中，很多时候用户会访问到不存在的页面或资源，这时候我们需要提供一个友好的 404 页面。在本文中，我们将介绍如何在 Vue.js SPA 应用中实现 404 页面，并给出示例代码。
实现原理
在 Vue.js SPA 应用中，所有的页面都是由路由控制的，因此我们可以通过路由来实现 404 页面。Vue Router 提供了一个 fallthrough 选项，在处理完所有路由规则后，如果没有匹配到任何路由，就会显示 404 页面。
具体来说，我们需要在路由配置中添加一个通配符路由，并将其 component 属性设置为我们要显示的 404 页面的组件。这样，当用户访问不存在的页面时，就会显示我们自定义的 404 页面。
实现步骤
以下是实现 404 页面的具体步骤：
- 定义一个 404 页面的 Vue 组件，例如：
-- -------------------- ---- ------- ---------- ----- ------- --- ---------- --------- --- ---- --- --- ------- --- ---- --- ---------- ------ ----------- -------- ------ ------- - ----- ----------- - ---------展开代码
- 在路由配置中添加一个通配符路由，并将其
component属性设置为 404 组件，例如：
-- -------------------- ---- ------- ----- ------ - --- ----------- ----- ---------- ------- - - ----- -------- ---------- ---- -- - ----- --------- ---------- ----- -- - ----- ----------- ---------- ------- -- - ----- ---- ---------- -------- -- -- --展开代码
这样，当用户访问不存在的页面时，就会显示我们自定义的 404 页面。
注意事项
需要注意以下几点：
通配符路由应该放在路由配置的最后一项，否则它会匹配所有的路由规则，而不是仅当没有匹配的路由时才生效。
在使用
history模式的路由时，如果用户直接访问不存在的页面，会返回 404 页面，但如果用户刷新 404 页面，会返回 404.html 页面，而不是继续显示自定义的 404 页面。这是因为服务器认为 404 页面是一个真正存在的静态文件，而不知道它实际上是一个动态生成的页面。为了解决这个问题，需要在服务器端配置重定向规则，将所有非真实存在的静态文件（包括 404 页面）都重定向到根页面上。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- ---- ------- --- ---------- ----- ---- ---------------- ---------------------------------- ---------------- ------------------------------------ ---------------- ---------------------------------------- ---------------- ------------------- ------------------------ ----- --------------------------- ------ ----------- -------- ------ ------- - ----- ------ - --------- ---- -------- --- ---------- ----- ------------- ---------- -- -- ---- --------- ------ ----------- -------- ------ ------- - ----- ------- - --------- ---- --------- --- ---------- ----- -------------- ---------- -- -- ----- --------- ------ ----------- -------- ------ ------- - ----- -------- - --------- ---- ----------- --- ---------- ----- ---------------- ---------- -- -- ------- --------- ------ ----------- -------- ------ ------- - ----- ---------- - --------- ---- ------------ --- ---------- ----- ------- --- ---------- --------- --- ---- --- --- ------- --- ---- --- ---------- ------ ----------- -------- ------ ------- - ----- ----------- - --------- ---- ------- --- ------ --- ---- ----- ------ --------- ---- ------------ ------ --- ---- ----------- ------ ---- ---- ------------ ------ ----- ---- ------------- ------ ------- ---- --------------- ------ -------- ---- ---------------- ------------------ ----- ------ - --- ----------- ----- ---------- ------- - - ----- -------- ---------- ---- -- - ----- --------- ---------- ----- -- - ----- ----------- ---------- ------- -- - ----- ---- ---------- -------- -- -- -- --- ----- --- ------- ------- ------- - -- ------- --展开代码
使用该示例代码，用户访问不存在的页面时，会显示我们自定义的 404 页面。
结语
在 Vue.js SPA 应用中，实现 404 页面非常简单，只需要在路由配置中添加一个通配符路由，并将其 component 属性设置为我们要显示的 404 页面的组件。希望本文的介绍对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6789e54f881faa801f768d68
