Vue Router：如何优雅地配置 404 页面

1. Vue Router如何优雅地配置 404 页面在单页面应用 (SPA) 的开发过程中路由跳转是核心功能。然而当用户访问一个不存在的 URL 时如果没有妥善处理页面可能会空白或直接报错。本文将详细介绍如何在 Vue Router 中配置 404 页面。1.1 为什么要配置 404 页面配置 404 页面不仅是为了美观更是为了提升用户体验避免用户看到崩溃的白屏。保护应用安全性隐藏内部路由结构防止恶意探测。引导用户提供返回首页或搜索的建议。1.2 核心配置方法Vue Router 提供了通配符路由 来实现这一功能。通过将路径设置为*我们可以捕获所有未匹配到的路由。1.2.1 路由匹配逻辑流程下图展示了 Vue Router 匹配路由的过程是否用户发起请求 URLVue Router 进入路由守卫检查匹配到有效路径?渲染匹配到的组件渲染通配符组件 (404 Page)页面更新1.2.2 代码实现首先你需要创建一个用于显示 404 错误信息的组件。步骤 1创建 NotFound 组件在src/views目录下创建NotFound.vuetemplate div classnot-found-container h1404/h1 p抱歉您访问的页面不存在。/p router-link to/返回首页/router-link /div /template script export default { name: NotFound } /script style scoped .not-found-container { text-align: center; margin-top: 100px; } /style步骤 2配置路由在src/router/index.js中添加通配符路由。注意通配符路由必须放在路由配置的最后否则它会拦截所有路由请求。import { createRouter, createWebHistory } from vue-router; import Home from ../views/Home.vue; import NotFound from ../views/NotFound.vue; const routes [ { path: /, name: Home, component: Home }, { path: /user/:id, name: User, component: () import(../views/User.vue) }, // 关键配置404 页面 { path: *, component: NotFound } ]; const router createRouter({ history: createWebHistory(process.env.BASE_URL), routes }); export default router;1.3 部署环境的注意事项配置好前端路由后在本地开发环境通常能正常显示 404 页面。但在生产环境部署如使用 Nginx时可能会有特殊的处理需求。1.3.1 单页应用 (SPA) 的路径问题如果在生产环境中直接访问不存在的路径例如/abc出现 404 Not Found 错误这可能是因为 Web 服务器如 Nginx找不到对应的 HTML 文件。为了避免这种情况通常需要在 Nginx 配置中使用try_files指令将所有请求转发给index.html。server { listen 80; server_name your-domain.com; root /var/www/html; index index.html; location / { try_files $uri $uri/ /index.html; } }如果上述配置生效那么当访问不存在的路径时Nginx 会将请求重写回index.html进而由 Vue Router 接管成功展示我们配置的 404 组件。1.4 总结配置 Vue Router 的 404 页面非常简单只需在路由配置文件中添加一个path: *的对象即可。但为了确保在服务器部署后的正常显示还需注意服务端的静态资源转发配置。希望本文能帮助您完善项目的鲁棒性。