Vue中404页面匹配

第一种：写在路由文件的最后：

{
    path:'/404',
    component:Page404,
    name:'404',
    meta:{
        keepAlive:true
    }
}
{
    path:'*',
    redirect:'/404'
}

原理：路由的匹配方式是从上到下的，当路由配置表中没有与跳转路径对应的路由时，统一会走到path:*这个页面去，此时重定向到404页面

第二种：导航守卫实现404页面跳转

router.beforEach(to,from,next)=>{
    if(to.matched.length===0){
        next('/404');
    }else{
        next();
    }
}

原理： 页面要跳转的路径如果和路由表中的路由path一致，或路由表中的路由path包含要跳转的路径，则会将路由path添加到matched数组中，如果matched的length属性为0，就表示没有相匹配的路由，此时让它跳转到404页面。