解决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设置FieldSet展开与收缩
May 15 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
Jul 18 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
JS中的一些常用的函数式编程术语
Jun 15 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 Javascript
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
JavaScript实现简易计算器小功能
Oct 22 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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
PHP微信红包API接口
2015/12/05 PHP
PHP信号处理机制的操作代码讲解
2019/04/19 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
js父页面与子页面不同时显示的方法
2014/10/16 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
Python多进程编程技术实例分析
2014/09/16 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
关于Java finally的面试题
2016/04/27 面试题
管理岗位竞聘演讲稿
2014/08/18 职场文书
考试作弊检讨书
2014/10/21 职场文书
导游词欢迎词
2015/02/02 职场文书
医院党建工作总结2015
2015/05/26 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python