解决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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
angularjs $http调用接口的方式详解
Aug 13 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 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中shell脚本的使用方法分享
2012/02/23 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
IE8 原生JSON支持
2009/04/13 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
js实现购物车功能
2018/06/12 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python无损压缩图片的示例代码
2020/08/06 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
护理学专业推荐信
2013/12/03 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
商场父亲节活动方案
2014/08/27 职场文书
2014年汽车销售工作总结
2014/12/01 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
中秋节晚会开场白
2015/05/29 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书