vue-router 路由的匹配语法静态路由和动态路由静态路由是在Vue应用启动时被建立的，在整个应用生命周期中保持不

静态路由和动态路由

静态路由是在Vue应用启动时被建立的，在整个应用生命周期中保持不变。路径要指定完整，必须精确匹配完整路径字符串，适用于公共路由，类似于/about
动态路由在应用运行时动态添加，适用于需要权限控制的业务路由和用户专属页面，类似于/users/:userId

路由的匹配语法

在参数中自定义正则

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 route.params 的形式暴露出来。

两个路由 /:orderId 和 /:productName，两者会匹配完全相同的 URL，那么该如何区分？

在路径中添加一个静态部分

 const routes = [ 
     // 匹配 /o/3549 
     { path: '/o/:orderId' }, 
     // 匹配 /p/books 
     { path: '/p/:productName' }
]

其中 /o /p 就是添加的静态部分

指定一个自定义的正则

const routes = [ 
    // /:orderId -> 仅匹配数字 
    { path: '/:orderId(\\d+)' }, 
    // /:productName -> 匹配其他任何内容 
    { path: '/:productName' }
]

现在，转到 /25 将匹配 /:orderId，其他情况将会匹配 /:productName

可重复的参数

需要匹配具有多个部分的路由，用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复

const routes = [ 
    // 仅匹配数字 // 匹配 /1, /1/2, 等 
    { path: '/:chapters(\\d+)+' }, 
    // 匹配 /, /1, /1/2, 等 
    { path: '/:chapters(\\d+)*' }, 
]

可选参数

通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选

path: "profile/:activeTab?",

注：* 在技术上也标志着一个参数是可选的，但 ? 参数不能重复。

匹配任意路径

常规参数只匹配 url 片段之间的字符，用 / 分隔。如果想匹配任意路径，可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入正则表达式

path: "/:pathMatch(.*)*",

在Vue Router中，path: '/:pathMatch(.*)*'是一个特殊的通配符路由配置，可以用于捕获任意路径并进行路由重定向。

path：表示该路由的路径，/意味着它匹配根路径。
:pathMatch：使用了路由参数（以冒号 : 开头），动态路径参数名称，可自定义
(.*) ：正则表达式，匹配任意字符（除换行符）
* ：用 *（0 个或多个）将参数标记为可重复

用法：

  {
    path: "/:pathMatch(.*)*",
    component: () => import("@/views/error/404"),
    hidden: true,  // 当设置 true 的时候该路由不会再侧边栏出现
  }

如果用户输入了一个不存在的路由，且没有其他匹配的路由可用，那么这个路由将会被触发进行处理。
由于这个路由是最后一个被匹配的路由，它的作用主要是为了确保所有未匹配的路径都会重定向到 /error/404，以便给用户返回一个统一的 404 错误页面。

相似写法类比：

// 写法1：捕获为字符串
path: '/:pathMatch(.*)'  
// 访问 /foo/bar → params: { pathMatch: 'foo/bar' }

// 写法2：捕获为数组
path: '/:pathMatch(.*)*'
// 访问 /foo/bar → params: { pathMatch: ['foo', 'bar'] }