Vue 路由器：路由的匹配语法

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

目录

• 让我们一起走向未来

• Vue中路由器的匹配语法

• 1. 参数中自带定义正则

• 示例：

• 正则的常见用法：

• 注意：

• 2. 可重复的参数

• 示例：
• 如何获取多个相同名称的参数？
• 注意：

• 3. Sensitive 与 strict 路由配置

• Sensitive 路由配置
• 示例：
• strict 路由配置
• 示例：
• 注意：

• 4. 可选参数

• 示例：
• 如何处理可选参数？
• 注意：

• 总结

Vue中路由器的匹配语法

Vue.js 是一款渐进式的前端框架，在其核心之一的 Vue Router 中，提供了强大的路由匹配功能，可以帮助开发者构建动态和响应式的单页应用（SPA）。Vue Router 的路由匹配语法涉及多种复杂的匹配机制，以适应不同的开发需求。本文将详细介绍 Vue Router 中的四种路由匹配语法：参数中自带定义正则、可重复的参数、Sensitive 与 strict 路由配置、可选参数。

1. 参数中自带定义正则

在 Vue Router 中，当你需要匹配路径中的某个动态参数时，通常可以使用冒号 : 来声明该参数。例如，/user/:id 路径可以匹配类似 /user/123 或 /user/abc 的路径，id 就是动态参数。

然而，在某些情况下，你可能需要对参数进行更复杂的匹配，这时可以在参数声明时直接带上正则表达式来限制匹配条件。比如，如果你只想匹配数字，你可以通过正则表达式来限定。

示例：

const routes = [
  {
    path: '/user/:id(\\d+)',
    component: User
  }
]

在上面的例子中，id 参数使用了正则表达式 \\d+，意味着它只匹配包含数字的路径（例如 /user/123），如果路径是 /user/abc，则不会匹配。

正则的常见用法：

• \\d+：匹配数字
• \\w+：匹配字母、数字或下划线
• [^/]+：匹配除了斜杠以外的任意字符

通过这种方式，我们可以确保路径参数的格式符合预期。

注意：

1. 正则表达式需要使用双反斜杠 \\ 来进行转义，因为在 JavaScript 中，反斜杠本身是一个转义字符。
2. Vue Router 的正则匹配是基于 JavaScript 正则的，因此可以使用 JavaScript 正则的所有特性。

2. 可重复的参数

在 Vue Router 中，通常情况下路径中的参数是唯一的。例如，/user/:id 中的 id 是唯一的参数。但是，如果你想在路径中允许多个相同名称的参数，Vue Router 也支持这一功能。

示例：

const routes = [
  {
    path: '/search/:query/:query',
    component: Search
  }
]

在上面的例子中，路径 /search/vue/vue 将匹配到 query 参数的两个值：vue 和 vue。但需要注意，Vue Router 会为每个相同名称的参数分配不同的值。

如何获取多个相同名称的参数？

你可以通过 this.$route.params 来访问路径中的动态参数。如果路径中有多个同名的参数，params 对象将会包含多个对应的值：

this.$route.params.query // ['vue', 'vue']

此时，query 参数将会是一个数组，包含所有匹配的值。

注意：

1. 多个相同名称的参数在某些情况下可能会导致路由匹配逻辑的混乱，因此在设计路由时需要谨慎使用。
2. 目前 Vue Router 对于多个同名参数的处理并不十分常见，建议仅在特定场景下使用，如查询参数或搜索功能等。

3. Sensitive 与 strict 路由配置

Vue Router 提供了两种路由匹配配置：Sensitive 和 strict，它们分别影响路由的大小写敏感性和路径末尾斜杠的处理方式。

Sensitive 路由配置

默认情况下，Vue Router 是大小写敏感的。这意味着 /User/123 和 /user/123 被认为是两个不同的路由。如果你希望路径不区分大小写，可以通过设置 sensitive: false 来实现不敏感匹配。

示例：

const routes = [
  {
    path: '/user/:id',
    component: User,
    sensitive: false
  }
]

上面的代码中，/user/123 和 /User/123 都能匹配到该路由组件 User。

strict 路由配置

在 Vue Router 中，路由的匹配是允许末尾有或没有斜杠的。如果你希望路由匹配时严格要求末尾的斜杠，您可以使用 strict 配置来强制路径严格匹配。

示例：

const routes = [
  {
    path: '/user/:id/',
    component: User,
    strict: true
  }
]

在上面的代码中，/user/123/ 会匹配到路由，而 /user/123 则不会匹配到该路由。

注意：

1. sensitive 配置默认为 true，即路由是大小写敏感的。
2. strict 配置默认为 false，即路由末尾的斜杠会被忽略。如果你希望严格匹配路由，可以设置为 true。

4. 可选参数

在 Vue Router 中，有时我们需要定义一个参数为“可选”的情况，也就是说，参数可以存在也可以不存在。如果参数缺失，路由应该仍然能够匹配并正确处理。这种情况下，我们可以通过在路径中使用 ? 来标记参数为可选。

示例：

const routes = [
  {
    path: '/user/:id?',
    component: User
  }
]

在上面的代码中，id 参数是可选的，意味着 /user/ 和 /user/123 都可以匹配到该路由。当路径是 /user/ 时，id 参数的值将是 undefined。

如何处理可选参数？

在组件中，你可以通过 this.$route.params.id 来访问 id 参数。如果没有提供该参数，id 将是 undefined，你可以在组件内进行相应的处理。

const User = {
  template: '<div>User ID: {{ id }}</div>',
  computed: {
    id() {
      return this.$route.params.id || 'No ID';
    }
  }
}

注意：

1. 可选参数必须位于路径的末尾，因为 Vue Router 会根据路径中可选参数的位置来判断如何匹配。
2. 可选参数与默认值结合使用时，可以提供更灵活的路由设计。

总结

在 Vue Router 中，路由的匹配语法非常灵活，支持多种复杂的匹配规则。这些规则可以帮助开发者根据不同的需求设计灵活的路由结构。本文介绍了四种常见的路由匹配语法：参数中自带定义正则、可重复的参数、Sensitive 与 strict 路由配置、可选参数，并结合具体的示例展示了如何使用它们。