当前位置: 首页 > Web前端 > HTML

vue3路由配置,路由匹配到404页面

时间:2023-03-28 11:20:58 HTML

对于不匹配的路由,我们一般匹配到一个固定的页面,比如404页面,在vue3中,我们一般通过pathMatch来设置。如下://方法一:{path:'/:pathMatch(.*)',component:()=>import('../views/notFound.vue')},//方法二{path:'/:pathMatch(.*)*',component:()=>import('../views/notFound.vue')},方法2在方法1之后多了一个“*”,区别在于是否解析“/”。例如:当我访问一个不存在的路由“http://127.0.0.1:5173/#/homef...”时,方法一Method2完整代码如下import{createRouter,createWebHashHistory}from'vue-router'constroutes=[{path:"/",redirect:'/home'},{path:'/home',component:()=>import('../views/home.vue')},{path:'/about',component:()=>import('../views/about.vue')},//方法一:{path:'/:pathMatch(.*)',component:()=>import('../views/notFound.vue')},//方法2{path:'/:pathMatch(.*)*',component:()=>import('../views/notFound.vue')},]constrouter=createRouter({routes,history:createWebHashHistory()})导出默认路由器