一般我们再设置404页面路由的时候是这样的:

{
path: "/404",
name: "notFound",
component: notFound
}, {
path: "*", // 此处需特别注意置于最底部
redirect: "/404"
}

但是如果你使用的是vue3的话,你会遇到这样的一个报错:

Catch all routes (“*”) must now be defined using a param with a custom regexp.

这个报错翻译过来就是捕获所有路由(“*”)现在必须使用带有自定义regexp的参数定义

首先我们得知道在vue3中对404配置进行了修改,必须要使用正则匹配

那么这个时候我们就需要用到这两个属性值:

{
path:'/:pathMatch(.*)*'
}
{
path:'/:pathMatch(.*)'
}

官方代码:

// plan on directly navigating to the not-found route using its name
  { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFound },
  // if you omit the last `*`, the `/` character in params will be encoded when resolving or pushing
  { path: '/:pathMatch(.*)', name: 'bad-not-found', component: NotFound },

那么便知道了这两种写法的不同:

如果省略最后一个’*‘在解析或推送时将对params中的’/'字符进行编码

借鉴文章: https://blog.csdn.net/qq_42723113/article/details/119846710

GitHub 加速计划 / vu / vue
108
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐