本文共 677 字，大约阅读时间需要 2 分钟。

当我们访问的路由没有预先定义的时候，就会跳到一个空白的页面。这类体验不太友好，为了解决这个问题，我们需要配置路由，使得访问不存在的路由自动跳转到404页面。

为了实现这个功能，我使用了Vue Router的路由守卫功能。在项目的index.ts文件中，我们添加了路由守卫和错误处理回调。具体来说，我们引入了vue-router并定义了几个路由。为了处理未定义路由的问题，我们还创建了一个名为beforeEach.ts的文件，其中封装了一个checkAuth方法来检查路由的存在。

在beforeEach.ts中，我们使用vue-router的Router对象来检查路由的存在。具体来说，我们检查了当前的路由路径是否包含/frame、/pages或其他可能的路径。如果发现路径不存在，就将用户重定向到/404页面。

在主路由配置文件中，我们引入了这个beforeEach方法，并在路由守卫中调用它。这样，每当用户尝试访问一个未定义的路由时，路由守卫就会介入，检查路由是否存在，并根据结果进行重定向。

此外，我们还定义了一些具体的路由，比如/admin、/pc和/phone等，每个路由都有对应的组件和子路由。我们还设置了错误处理回调，用于捕捉路由错误并进行日志记录。

通过以上配置，现在当用户访问未定义的路由时，系统会自动跳转到404页面，提供了一个更友好的用户体验。这个过程使用了Vue Router的路由守卫功能，确保了路由的安全性和可控性。

如果需要更详细的代码实现，可以参考我的Vue 3项目库：项目链接。如果有任何建议或问题，也欢迎在评论区留言。