解决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 相关文章推荐
JQuery 将元素显示在屏幕的中央的代码
Feb 27 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Vuex简单入门
Apr 19 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
深入理解vue $refs的基本用法
Jul 13 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
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的cms
2010/12/19 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
python中模块的__all__属性详解
2017/10/26 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
python的pip安装以及使用教程
2018/09/18 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python对视频画框标记后保存的方法
2018/12/07 Python
Django中Middleware中的函数详解
2019/07/18 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
opencv实现图像平移效果
2021/03/24 Python
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
文明班集体申报材料
2014/05/23 职场文书
房屋维修协议书范本
2014/09/25 职场文书
2016反腐倡廉警示教育心得体会
2016/01/13 职场文书