vue3设置路由path:‘*‘报错解决方法
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
·
一般我们再设置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
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 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)