在Vue Router的路由配置中,path: '/:pathMatch(.*)*' 的最后一个星号 (*)的含义原来如此!!!
在Vue Router的路由配置中,path: '/:pathMatch(.*)*' 的最后一个星号 * 是一个修饰符,用于控制参数的捕获方式。它的具体作用如下:
允许匹配包含斜杠的路径段
默认情况下,动态参数(如 :param)不会匹配斜杠(/)。例如,/user/:id 只会匹配 /user/123,不会匹配 /user/123/profile。通过正则表达式 (.*),参数可以匹配任意字符(包括斜杠)。
将参数解析为数组
最后的 * 修饰符会将匹配到的路径按斜杠分割成数组。例如:
路径 /a/b/c 会被捕获为 params.pathMatch: ['a', 'b', 'c']。
若没有 *(如 path: '/:pathMatch(.*)'),参数会是一个字符串 'a/b/c'。
支持空匹配
* 表示参数可以匹配零次或多次,因此即使路径为空(如根路径 /),也能匹配成功,此时 params.pathMatch 为空数组。
示例对比
(1)带 * 的情况:
{ path: '/:pathMatch(.*)*', component: NotFound }
路径 /one/two → pathMatch: ['one', 'two']
路径 / → pathMatch: []
(2)不带 * 的情况:
{ path: '/:pathMatch(.*)', component: NotFound }
路径 /one/two → pathMatch: 'one/two'
路径 / → pathMatch: ''
应用场景
这种配置通常用于 404 页面,以捕获所有未匹配的路径,并可以通过数组形式(带 *)或字符串形式(不带 *)灵活处理路径信息。选择使用 * 修饰符时,参数会以数组形式提供,便于直接操作路径段。