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

初探vue-router：如何为单页应用添加友好的无效路由提示

在构建单页面应用时，vue-router作为Vue.js的官方路由插件，为我们的项目提供了集成的路由解决方案。今天，我将和大家分享一个有趣的DIY思路，如何在vue-router中实现无效路由（404）的友好提示。

我们都知道，在单页面应用中，当路由匹配失败时，页面通常会呈现一片空白。那么，我们是否可以在路由匹配上做点什么，给用户一个友好的提示呢？让我们一起吧！

我们需要对路由进行监测。我们可以在组件中通过`this.$route`获取当前路由，然后使用`watch`监测路由的变化。这样，所有的路由变化都会反映在根路由组件（如App.vue）上。

接下来，我们要检测无效路由。通过查看`$route.matched`，我们可以知道当前路由是否匹配到注册的路由组件。如果没有匹配结果，那么就说明当前路由是无效的。

然后，我们可以使用条件渲染来展示页面内容。如果路由有效，就渲染`router-view`；如果路由无效，就显示一个友好的提示信息。

让我们通过一个简单的Demo来展示如何实现这个功能：

App.vue

```html

```

在这个Demo中，我们使用了计算属性`invalidRoute`来检测路由是否有效。如果无效，就显示“404”提示；否则，就渲染对应的路由组件。

至于404提示的样式和内容，你可以根据自己的需求进行定制，让它更加友好、更具吸引力。

希望这篇文章能对你有所帮助。如果你有任何疑问或建议，欢迎留言交流。感谢大家对狼蚁SEO的支持和关注！