解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
更新时间：2018年08月24日 15:35:51 作者：huang100qi
今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在做项目的时候，遇到需要做路由跳转，但当用户输入错误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路由跳转未匹配相应用路由避免出现空白页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue+Vant 图片上传加显示的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
浅谈vue的props，data，computed变化对组件更新的影响
本篇文章主要介绍了浅谈vue的props，data，computed变化对组件更新的影响，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，它的作用是告诉访问者他们在网站中的位置以及如何返回，本文为大家介绍了实现面包屑导航的正确方式，需要的可以参考一下2023-06-06
如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,这篇文章主要给大家汇总介绍了关于Vue项目中常用的实用技巧,需要的朋友可以参考下2021-07-07
下面小编就为大家带来一篇基于Vue生产环境部署详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了vue基础之ElementUI的表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
vue项目打包后上传至GitHub并实现github-pages的预览
这篇文章主要介绍了vue项目打包后上传至GitHub并实现github-pages的预览，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Element UI/Plus中全局修改el-table默认样式的解决方案
element ui官方封装好的el-table组件,好用是挺好用的,但不可避免的是默认的样式,下面这篇文章主要给大家介绍了关于Element UI/Plus中全局修改el-table默认样式的解决方案,需要的朋友可以参考下2023-02-02
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片较多，篇幅太长，就会比较烦恼，接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,需要的朋友可以参考下2018-08-08
Volar 与vetur相同,volar是一个针对vue的vscode插件,下面这篇文章主要给大家介绍了关于Vue3格式化Volar报错的原因分析与解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-06-06
最新评论