在Vue中路由可以分为像/about 这样的静态路由和 /users/:userId 这样的动态路由
动态路径参数正则
在某些情况下，我们可能需要根据参数的内容来区分两个路由
{ path: '/:orderId' }
{ path: '/:productName' }
这两个路由都可以匹配类似于 /123 的 URL，这可能会导致我们的应用程序出现问题
// 一种解决方法是在路径中添加一个静态部分来区分它们
{ path: '/o/:orderId' }
{ path: '/p/:productName' }
但有时我们可能不想添加静态部分。在这种情况下，我们可以使用自定义正则表达式来指定参数的格式
{ path: '/:orderId(\\d+)' }
{ path: '/:productName' }
上述定义中，我们在 :orderId 参数后面使用了一个括号，括号内包含一个自定义的正则表达式 \d+，该正则表达式匹配一个或多个数字，这意味着如果 URL 中的参数符合数字的格式，它将匹配第一个路由。否则，它将匹配第二个路由
需要注意的是，动态路径参数中的正则会以字符串形式传递给RegExp类，所以我们需要对反斜杠字符进行转义，例如使用 \\d+ 来匹配数字
可重复的参数
如果你需要匹配具有多个部分的路由，如 /first/second/third，你应该用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复
const routes = [
// /:chapters -> 匹配 /one, /one/two, /one/two/three, 等
{ path: '/:chapters+' },
// /:chapters -> 匹配 /, /one, /one/two, /one/two/three, 等
{ path: '/:chapters*' },
]
这些也可以通过在右括号后添加它们与自定义正则结合使用
const routes = [
// 仅匹配数字
// 匹配 /1, /1/2, 等
{ path: '/:chapters(\\d+)+' },
// 匹配 /, /1, /1/2, 等
{ path: '/:chapters(\\d+)*' },
]
sensitive 与 strict
默认情况下，所有路由是不区分大小写的，并且能匹配带有或不带有尾部斜线的路由。例如，路由 /users 将匹配 /users、/users/、甚至 /Users/
这种行为可以通过 strict 和 sensitive 选项来修改，它们可以既可以应用在整个全局路由上，又可以应用于当前路由上
sensitive 属性用于指定路由匹配时是否区分大小写，即当该属性为 true 时，路由匹配将区分大小写；当该属性为 false 时，路由匹配将不区分大小写。默认情况下，该属性的值为 false，即路由匹配不区分大小写
strict 属性用于指定路由匹配时是否进行严格匹配，即当该属性为 true 时，路由匹配将进行严格匹配；当该属性为 false 时，路由匹配将进行非严格匹配。默认情况下，该属性的值为 false，即路由匹配进行非严格匹配。
const router = createRouter({
history: createWebHistory(),
routes: [
// 将匹配 /users/posva
// - 不匹配/users/posva/ 因为strict: true
// - 不匹配/Users/posva 因为sensitive: true
{ path: '/users/:id', sensitive: true },
// 将匹配 /users, /Users, 以及 /users/42 不匹配 /users/ 或 /users/42/
{ path: '/users/:id?' },
],
strict: true, // 应用于所有的路由对象
})
可选参数
你也可以通过使用 ? 修饰符(0 个或 1 个)将一个参数标记为可选
请注意，* 在技术上也标志着一个参数是可选的，但 ? 参数不能重复
const routes = [
// 匹配 /users 和 /users/posva
{ path: '/users/:userId?' },
// 匹配 /users 和 /users/42
{ path: '/users/:userId(\\d+)?' },
]
