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

发布时间：2020-12-17 02:13:03 所属栏目：百科来源：网络整理

导读：在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但

在做项目的时候，遇到需要做路由跳转，但当用户输入错误url地址，或是其它非法url路由地址，我们或许会想到跳转至404页面。不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。可能大家首先想到会是路由重定向，redirect来解决这个问题。但实际上通过redirect是没办法更好解决这个问题的。

看代码红色部分

import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
let routes = [
{
path: '/',name: 'Login',component: Login
},{
path: '/login',{
path: '/index',name: 'Index',component: Hello,}
];
const router = new Router({
history: true,routes : routes
});

重点如下：

{ if (to.matched.length ===0) { //如果未匹配到路由 from.name ? next({ name:from.name }) : next('/'); //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由 } else { next(); //如果匹配到正确跳转 } });

以上这篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!