[JavaScript知识库]vue3设置路由path:‘*‘报错解决方法

一般我们再设置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中的'/'字符进行编码