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

这篇文章主要为大家详细介绍了解决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路由跳转未匹配相应用路由避免出现空白页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5766-0.html

注：关于解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js