在vue.js中通过vue-router如何实现无效路由提示

众所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，下面这篇文章主要给大家介绍了关于vue.js中vue-router如何实现无效路由(404)的友好提示的相关资料，需要的朋友可以参考下。

前言

大家都知道对于单页应用，官方提供了vue-router进行路由跳转的处理，而最近在做一个基于vue-router的SPA，想对无效路由(404)页面做下统一处理。

这次我真的没有在官方文档找到具体的说明[捂脸]

所以本文仅是我DIY的一个思路，求轻虐=_=

在我的理解中，vue-router是根据path去匹配注册的route，匹配到则加载对应的组件，匹配不到则重置(或者说清空)对应的router-view。

所以，我们不做处理的话，最终页面展示的是一片空白。

那么，我们是不是可以在路由匹配上做文章呢？

路由监测

在组件中，可以从this.$route获取当前路由，那么就可以使用watch监测路由的变化，监测所有路由变化自然而然的落在根路由组件(如：App.vue)上面了。

无效路由检测

$route.matched包含了当前路由的匹配结果，如果为空则说明当前路由无效。

界面提示

可使用条件渲染，路由有效则渲染router-view，路由无效则渲染提示信息。

Demo

App.vue

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

有关于JavaScript使用中Object值如何合并

在Angular中如何实现验证

在Angular中如何实现table表格排序

在Vue中有关于localstorage和sessionstorage如何使用

有关jackson如何解析json字符串

在js中如何读取本地文件

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!