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

让我们一起走向未来

🎓作者简介：全栈领域优质创作者
🌐个人主页：百锦再@新空间代码工作室
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[15045666310@163.com]
📱个人微信：15045666310
🌐网站：https://meihua150.cn/
💡座右铭：坚持自己的坚持，不要迷失自己！要快乐

---

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+：匹配数字