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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
JavaScript中的继承方式详解
Feb 11 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
JavaScript_object基础入门(必看篇)
Jun 13 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 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
图书管理程序(一)
2006/10/09 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
PHP中的替代语法介绍
2015/01/09 PHP
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
一段好玩的JavaScript代码
2006/12/01 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
全面了解js中的script标签
2016/07/04 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
python中类的一些方法分析
2014/09/25 Python
python遍历目录的方法小结
2016/04/28 Python
对python中return和print的一些理解
2017/08/18 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python实现自动发送报警监控邮件
2018/06/21 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
美国在线家装零售商:Build.com
2016/09/02 全球购物
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
投资意向书范本
2014/04/01 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android