Vue项目404页面定制与路由失效重定向

在Vue项目开发中，遇到路由不存在时的404页面管理是一个常见的需求。当用户尝试访问未定义的URL时，提供一个友好的404错误提示不仅提升用户体验，还能避免浏览器默认的空白页展示。在Vue路由配置中，可以通过设置`path:*`通配符来实现这个功能。 首先，常规的做法是在router对象的routes数组中添加一个专门的404路由。例如： ```javascript const baseRoute = [ // ...其他路由配置 { path: '/404', // 静态404页面 name: 'page404', component: page404, }, // 使用通配符处理所有未匹配的路径 { path: '*', // 当所有其他路径都不匹配时，重定向到404页面 redirect: '/404', name: 'notFound', hidden: true, // 隐藏这个路由不显示在菜单中 } ]; ``` 这样配置后，如果用户试图访问的路由未在配置中列出，浏览器将自动跳转到`/404`页面。这里提到的一个小问题是关于token失效的处理，如果在处理token失效时，需要记录用户之前的路由以便登录后重定向，可以在判断路径时进行特殊处理。例如： ```javascript if (to.path.slice(1) !== '') { // 如果路径包含查询参数（比如redirect） router.push({ path: '/login', query: { redirect: to.path.slice(1) // 将用户之前请求的路径作为redirect参数传递 } }); } else { router.push('/'); // 如果没有查询参数，可能表示直接访问登录页，直接跳转根路径 } ``` 通过这种方式，即使在处理登录流程时，用户也能在登录成功后回到他们原本想要访问的页面。这不仅实现了404页面的定制，还考虑到了用户体验的连续性。 总结起来，Vue项目中处理路由不存在时的404页面，关键在于灵活配置路由和在特定场景下（如token失效）正确处理重定向逻辑。这种做法提高了应用的稳定性和用户体验。