路由匹配语法

大多数应用程序将使用静态路由，例如 /about 和动态路由，例如 /users/:userId，就像我们在动态路由匹配中看到的那样，但 Vue Router 提供了更多功能！

提示

为了简单起见，所有路由记录都省略了 component 属性，以专注于 path 值。

参数中的自定义正则表达式

在定义参数时，例如 :userId，我们内部使用以下正则表达式 ([^/]+)（至少一个不是斜杠 / 的字符）从 URL 中提取参数。这很好用，除非你需要根据参数内容区分两个路由。想象一下两个路由 /:orderId 和 /:productName，它们都将匹配完全相同的 URL，因此我们需要一种方法来区分它们。最简单的方法是在路径中添加一个静态部分来区分它们

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

但在某些情况下，我们不想添加那个静态部分 /o/p。但是，orderId 始终是一个数字，而 productName 可以是任何东西，因此我们可以为参数指定一个自定义正则表达式，放在括号中

const routes = [
  // /:orderId -> matches only numbers
  { path: '/:orderId(\\d+)' },
  // /:productName -> matches anything else
  { path: '/:productName' },
]

现在，访问 /25 将匹配 /:orderId，而访问其他任何内容将匹配 /:productName。routes 数组的顺序甚至无关紧要！

提示

确保转义反斜杠 (\)，就像我们对 \d 所做的那样（变成 \\d），以便在 JavaScript 中的字符串中实际传递反斜杠字符。

可重复参数

如果你需要匹配具有多个部分的路由，例如 /first/second/third，你应该使用 *（0 个或多个）和 +（1 个或多个）将参数标记为可重复的

const routes = [
  // /:chapters -> matches /one, /one/two, /one/two/three, etc
  { path: '/:chapters+' },
  // /:chapters -> matches /, /one, /one/two, /one/two/three, etc
  { path: '/:chapters*' },
]

这将为你提供一个参数数组，而不是一个字符串，并且还要求你在使用命名路由时传递一个数组

// given { path: '/:chapters*', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// produces /
router.resolve({ name: 'chapters', params: { chapters: ['a', 'b'] } }).href
// produces /a/b

// given { path: '/:chapters+', name: 'chapters' },
router.resolve({ name: 'chapters', params: { chapters: [] } }).href
// throws an Error because `chapters` is empty

这些也可以与自定义正则表达式结合使用，方法是在右括号后添加它们

const routes = [
  // only match numbers
  // matches /1, /1/2, etc
  { path: '/:chapters(\\d+)+' },
  // matches /, /1, /1/2, etc
  { path: '/:chapters(\\d+)*' },
]

敏感和严格路由选项

默认情况下，所有路由都区分大小写，并且匹配带有或不带有尾部斜杠的路由。例如，路由 /users 匹配 /users、/users/ 甚至 /Users/。此行为可以使用 strict 和 sensitive 选项配置，它们可以在路由器和路由级别设置

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // will match /users/posva but not:
    // - /users/posva/ because of strict: true
    // - /Users/posva because of sensitive: true
    { path: '/users/:id', sensitive: true },
    // will match /users, /Users, and /users/42 but not /users/ or /users/42/
    { path: '/users/:id?' },
  ],
  strict: true, // applies to all routes
})

可选参数

你也可以使用 ? 修饰符（0 个或 1 个）将参数标记为可选

const routes = [
  // will match /users and /users/posva
  { path: '/users/:userId?' },
  // will match /users and /users/42
  { path: '/users/:userId(\\d+)?' },
]

请注意，* 在技术上也标记参数为可选，但 ? 参数不可重复。

调试

如果你需要深入了解你的路由是如何转换为正则表达式的，以了解为什么路由没有被匹配，或者要报告错误，你可以使用路径排名工具。它支持通过 URL 共享你的路由。

成为赞助商

VueMastery

Prefect

路由匹配语法 ​

参数中的自定义正则表达式 ​

可重复参数 ​

敏感和严格路由选项 ​

可选参数 ​

调试 ​

路由匹配语法

参数中的自定义正则表达式

可重复参数

敏感和严格路由选项

可选参数

调试