vue.js vue-router如何实现无效路由(404)的友好提示

前言 大家都知道对于单页应用，官方提供了vue-router进行路由跳转的处理，而最近在做一个基于vue-router的SPA，想对无效路由(404)页面做下统一处理。 这次我真的没有在官方文档找到具体的说明[捂脸] 所以本文仅是我DIY的一个思路，求轻虐=_= 在我的理解中，vue-router是根据path去匹配注册的route，匹配到则加载对应的组件，匹配不到则重置(或者说清空)对应的router-view。 所以，我们不做处理的话，最终页面展示的是一片空白。 那么，我们是不是可以在路由匹配上做文章呢？ 路由监测 在组件中，可以从this.$route获取当前路由，那么就可以使 在构建Vue.js单页应用程序（SPA）时，路由管理是一个至关重要的部分，Vue Router作为官方推荐的路由库，提供了一套完整的解决方案。然而，当用户尝试访问未定义的路由时，通常会出现404错误，这给用户体验带来不理想的影响。本篇文章将探讨如何使用Vue Router来优雅地处理无效路由，即实现一个友好的404页面。 我们需要理解Vue Router的工作原理。Vue Router基于path路径来匹配预先注册的路由对象。当用户导航到一个新的URL，Vue Router会尝试找到与该URL相匹配的路由，并加载相应的组件。如果找不到匹配项，router-view会呈现空白状态，因为没有组件被加载。 为了捕获并处理无效路由，我们可以利用Vue组件的生命周期和Vue Router提供的API。在组件中，我们可以通过`this.$route`访问当前的路由信息。通过观察`$route`对象的变化，我们可以监听路由状态并采取相应行动。这通常在根组件（如`App.vue`）中完成，因为它是所有子组件的父组件，可以全局监听路由变化。 在`App.vue`中，我们可以使用`watch`对象来监视`$route`的变化。一旦检测到路由变化，我们可以检查`$route.matched`数组，这个数组包含了当前路由匹配的所有信息。如果`$route.matched`为空或长度为0，那就意味着当前路由没有匹配到任何预定义的路由，我们可以认为这是一个无效路由。 接下来，我们可以利用Vue的条件渲染功能来处理这种情况。通过在模板中使用`v-if`和`v-else`指令，我们可以根据`$route.matched`的状态来决定渲染哪个内容。如果路由无效，显示404错误提示；如果路由有效，则正常渲染`router-view`，让其展示匹配的组件。 以下是一个简单的示例代码： ```html <template> <div> <p v-if="invalidRoute">404 Not Found</p> <router-view v-else></router-view> </div> </template> <script> export default { name: 'App', computed: { invalidRoute() { return !this.$route.matched || this.$route.matched.length === 0; }, }, }; </script> ``` 在这个例子中，`invalidRoute`计算属性返回一个布尔值，指示当前路由是否无效。如果`invalidRoute`为真，"404 Not Found"文本会被渲染；否则，`router-view`会按常规方式显示。 你可以根据需求自定义404页面的设计，让它更符合你的应用风格，比如添加返回主页的链接、提供搜索功能等。通过以上方法，我们可以有效地捕捉和处理无效路由，提升SPA的用户体验。 总结一下，本文介绍了如何在Vue.js和Vue Router环境中处理无效路由，通过监听路由变化、检查匹配状态以及条件渲染，我们能够实现一个友好的404页面。这种方法不仅有助于避免空白页面，还能引导用户正确地导航到其他有效页面，从而提高应用的整体质量。