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

我们经常遇到客户如果输错URL，就会出现空白，那么我们怎么结局呢？
1.路由所有匹配不到时，返回首页；
//创建路由对象并配置路由规则
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，路由按顺序从上到下，依
//次匹配。最后一个能匹配全部，NotFound是一个显示404的组件页面
//重定向到"/"
{path:'*',redirect: "/"}
]
});

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