vue3踩坑记录(一) vue-router4的404路由匹配规则


{
    path: '*',
    name: 'error',
    component: Error,
    meta: { title: '404' },
}

区别于上面旧版的匹配规则,新版vue-router4需要使用自定义的路径参数正则表达式,在路径参数后面的括号中加入正则表达式;

const routes = [
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容,并将其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

即需要修改成:

{
    path: '/:pathMatch(.*)',
    name: 'error',
    component: Error,
    meta: { title: '404' },
},

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM