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

时间:2021-05-18

在做项目的时候,遇到需要做路由跳转,但当用户输入错误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路由跳转未匹配相应用路由避免出现空白页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章