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

<template>
 <p v-if="invalidRoute">404</p>
 <router-view v-else></router-view>
</template>
<script type="text/babel">
 export default {
 name: 'App',
 computed: {
  invalidRoute () {
  return !this.$route.matched || this.$route.matched.length === 0;
  }
 }
 };
</script>

至于404要多友好就看自己了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对北冥有鱼的支持。

您可能感兴趣的文章:

• vue-router：嵌套路由的使用方法
• 详解vue嵌套路由-params传递参数
• 详解vue嵌套路由-query传递参数
• vue router学习之动态路由和嵌套路由详解
• vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
• vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
• Vue的路由动态重定向和导航守卫实例
• vue嵌套路由与404重定向实现方法分析