2钟方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

路由全局守卫

在做项目时，遇到需要做路由跳转，但是用户输错了URL地址，或者其他非法URL路由地址，我们可能会跳转到404页面，不管你有没有写一个404页面，当出现未匹配路由都需重新指定页面跳转。我们首先想到的一定会是路由重定向，redirect来解决。但是它并不能很好的解决。

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

2.重定向
当我们输入错误URL地址等各种原因导致我们不能继续访问，那么我们可以使用重定向的方法，只要在路由中添加该代码就可以了。

//创建路由对象并配置路由规则
let router = new VueRouter({
    routes:[
       {path:'/',redirect:{name:"home"}},  // 重定向到主页
       {name:'home',path:'/home',component:Home},
       {path:'/music',component:Music},
       {path:'/movie',component:Movie},
       {name:'img',path:'/picture22',component:Picture},
       {name:'musicDetail',path:'/musicDetail/:id/:name',component:MusicDetail},
       {path:'*',component:NotFound},//全不匹配的情况下，返回404，路由按顺序从上到下，依次匹配。最后一个*能匹配全部，
    ]
});

或者通过这样也可以

{
      path: "*",
      redirect: "/"
}

这个代码就是将所有的（*）错误页面，都重定向到“/”中。