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


Posted in Javascript onDecember 20, 2017

前言

大家都知道对于单页应用,官方提供了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要多友好就看自己了

总结

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

Javascript 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
window.location.hash 属性使用说明
Mar 20 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
js跨域请求数据的3种常用的方法
Dec 01 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
AngularJS 最常用的八种功能(基础知识)
Jun 26 Javascript
微信小程序网络封装(简单高效)
Aug 06 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
Html5生成验证码的示例代码
May 10 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 #Javascript
canvas轨迹回放功能实现
Dec 20 #Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 #jQuery
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 #Javascript
浅谈gulp创建完整的项目流程
Dec 20 #Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 #Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 #Javascript
You might like
深入分析php中接口与抽象类的区别
2013/06/08 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
jQuery1.6 类型判断实现代码
2011/09/01 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
理解javascript封装
2016/02/23 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python处理csv中的空值方法
2018/06/22 Python
GC是什么?为什么要有GC?
2013/12/08 面试题
班主任班级寄语大全
2014/04/04 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
2015年简历自我评价范文
2015/03/11 职场文书
行政司机岗位职责
2015/04/10 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
python基础学习之递归函数知识总结
2021/05/26 Python