解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题


Posted in Javascript onAugust 24, 2018

在做项目的时候,遇到需要做路由跳转,但当用户输入错误url地址,或是其它非法url路由地址,我们或许会想到跳转至404页面。不管你有没有写一个404页面,当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向,redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。

看代码红色部分

import Vue from 'vue'

import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
let routes = [
 {
 path: '/',
 name: 'Login',
 component: Login
 },
 {
 path: '/login',
 name: 'Login',
 component: Login
 },
 {
 path: '/index',
 name: 'Index', 
 component: Hello,
 }
];
const router = new Router({
 history: true,
 routes : routes
});

重点如下:

router.beforeEach((to, from, next) => {
if (to.matched.length ===0) { //如果未匹配到路由
from.name ? next({ name:from.name }) : next('/'); //如果上级也未匹配到路由则跳转登录页面,如果上级能匹配到则转上级路由
} else {
next(); //如果匹配到正确跳转
}
});

以上这篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 06 Javascript
Javascript面向对象之四 继承
Feb 08 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
May 31 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
javascript操作表格排序实例分析
May 06 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
node.js操作mysql简单实例
May 25 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 Javascript
理解Proxy及使用Proxy实现vue数据双向绑定操作
Jul 18 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 #Javascript
vue 中引用gojs绘制E-R图的方法示例
Aug 24 #Javascript
解决webpack dev-server不能匹配post请求的问题
Aug 24 #Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 #Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 #Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 #Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 #Javascript
You might like
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
js仿360开机效果
2019/12/26 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
[01:38]【DOTA2亚洲邀请赛】Sumail——梦开始的地方
2017/03/03 DOTA
django1.8使用表单上传文件的实现方法
2016/11/04 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
介绍一下linux文件系统分配策略
2013/02/25 面试题
警察思想汇报
2014/01/04 职场文书
党员服务承诺书
2014/05/28 职场文书
火灾现场处置方案
2014/05/28 职场文书
团日活动总结怎么写
2014/06/25 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
放假通知范文
2015/04/14 职场文书
党员带头倡议书
2015/04/29 职场文书
小学毕业教师寄语
2019/06/21 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python