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.js路由组件vue-router使用方法详解
  • VueJs路由跳转——vue-router的使用详解
  • vue-router路由简单案例介绍
  • Vue.js：使用Vue-Router 2实现路由功能介绍
  • vue2笔记 — vue-router路由懒加载的实现
  • Vue.js路由vue-router使用方法详解
  • 详解vue2路由vue-router配置（懒加载）
  • 详解vue-router2.0动态路由获取参数
  • vue-router单页面路由
  • 详解vue-router 路由元信息
赞 (0)

相关推荐

  • Vue.js路由vue-router使用方法详解

    Vue.js路由vue-router使用方法详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w

  • Vue.js：使用Vue-Router 2实现路由功能介绍

    注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能. 推荐使用npm安装. npm install vue-router 一.使用路由 在main.js中,需要明确安装路由功能: import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) //1.定义组件,这里使用从其他

  • vue-router单页面路由

    vue中,有一个类库叫做vue-router,是用来做单页面路由的.做路由一般分为四个步骤: 准备一个根组件 vue.extend(): 需要做路由的内容准备 template: 准备路由 new VueRouter(): 关联路由   map 启动路由 start(App,'#box')://第一个参数是准备的根组件,第二个参数是要捆绑的位置就是自己定义的id中 github上vue-router下载地址:https://github.com/vuejs/vue-router 关于路由跳转的简

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    一下demo演示2.0中的vue-router是如何获取到不同参数的,并在地址栏中匹配不同的信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="vue.js&qu

  • vue-router路由简单案例介绍

    vue-router路由简单案例介绍

    官方文档: 旧版:https://github.com/vuejs/vue-router/tree/1.0/docs/zh-cn 新版:http://router.vuejs.org/(2.0版本) 此文是旧版 文件结构图: 基本用法: <router-view>是一个顶级的路由外链,用于渲染匹配的组件. 例如:我的应用入口是app.vue 那么在app.vue中添加如下代码, 此处涉及ES6. app.vue <template> <div class='page inde

  • VueJs路由跳转——vue-router的使用详解

    对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

  • vue2笔记 — vue-router路由懒加载的实现

    在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用. 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某

  • 详解vue2路由vue-router配置（懒加载）

    vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

  • 详解vue-router 路由元信息

    一.背景 之前写前端都是后端返回界面,跳转神马的完全不用自己操心,但是这次用 vue 写的前端,第一次前后端分离,后端只给前端提供数据接口,一开始还想着是后端控制界面的渲染神马的,但是后面一想,路由神马的都是前端控制的,后端的手伸不过来啊,于是乎就一直在逛 vue-router 的官网,想着应该会有相关的东西,然后发现了路由元信息,起初怎么也没看懂是什么意思,后面慢慢琢磨明白了,记录一下 二.代码分析 官网路由元信息 (1)路由定义 const router = new VueRouter({

随机推荐