带参数的动态路由匹配

简介

假设现在需要访问一个资料网站，当打开每篇文章后都会有一个独立的页面，但所有文章页面的不同点仅在于路径上的 ID 值不同，这时就可用动态路由来实现。

带参数的动态路由匹配是指根据不同的匹配模式，将包含占位符的路由路径匹配在一个组件上。这使得可以创建具有可变参数的路由，而不需要为每个参数的创建单独的路由规则。

路径参数

在 Vue Router 中，可以通过在路径中使用动态字段来实现这一功能，也被称为路径参数。路径参数以冒号 : 开头，用于标识在路由中会动态变化的部分。

当一个路由被匹配时，路由中定义的参数会被提取并以 params 的形式暴露在组件内部，可以通过 this.$route.params 进行访问。

在同一个路由规则中，可以设置多个路径参数，它们都会被映射到 $route.params 上的相应字段。

使用方式如下所示：

const 路由=[
    // 单个参数
    {
    path: '/post/:参数名',
    component: PostDetail
    },
    // 多个参数
    {
    path:'/name/:参数名A/posts/:参数名B'

    }
]

当访问路径为 /post/1 时，this.$route.params 就会是一个包含了 id 属性的对象，属性的值为 1 。因此，可以通过 this.$route.param.id 来获取到这个参数值。

捕获路由

当使用路由时，默认情况下参数只能匹配 URL 片段之间的字符串，使用 / 分隔。

如果需要匹配任意路径，可以通过自定义路径参数的正则表达式来实现。通过在路由规则中使用正则表达式，可以更灵活地匹配不同的路径。

代码示例如下所示：

const routes = [
  {
    path: '/user/:id(\\d+)', // 使用正则表达式匹配数字
    component: User
  },
  {
    path: '/product/:slug([a-z-]+)', // 使用正则表达式匹配小写字母和短横线
    component: ProductDetail
  },
]

访问 http://127.0.0.1:5173/#/user/123 效果如图所示：

访问 http://127.0.0.1:5173/#/product/hello-hi 效果如图所示：

通过编写正则表达式，可以实现一定规则的路由匹配。

利用这个技巧，可以创建一个通配符路由规则，以匹配所有路径，包括子路径。当访问的路径没有匹配到任何其他路由规则时，通配符路由会将路径导向一个专门用于显示404页面的组件 NotFound。

  // 通配符路由，捕获所有未匹配到的路径
  {
    path: '/:pathMatch(.*)*',
    component: NotFound
  }

这样，我们就能够优雅地处理未匹配到的路径，并显示一个友好的“页面未找到”信息。

这样做可以提升用户体验，让用户在访问不存在的路径时得到一个友好的提示页面。同时，也使得应用的路由系统更加健壮和可靠。

当访问页面 http://127.0.0.1:5173/#/user/login 时，因为不匹配路由规则，此时的页面效果如下图所示：

总结

本节介绍了如何在Vue Router中设置带参数的路由，以及如何利用正则表达式来匹配符合特定规则的动态路由。通过在路由规则中使用动态占位符和正则表达式，使得能够灵活地处理各种情况下的路由需求。