Skip to content
On this page

路由匹配

uni-simple-router 中,路由匹配是指根据当前的路由路径,确定要渲染的组件或页面。uni-simple-router 使用路径匹配规则来确定哪个路由规则与当前路径匹配。以下是一些关键概念和匹配规则:

  1. 动态路由参数: 通过使用冒号(:)来定义动态路由参数,例如 /user/:id。动态路由参数可以在路由规则中作为占位符,匹配任意值,并且可以通过 $Route.params 在组件中访问。
  2. Query 参数: Query 参数是指在路由路径后面使用问号(?)传递的参数,例如 /user?id=123。Query 参数可以通过 $Route.query 在组件中访问。
  3. 嵌套路由: uni-simple-router 支持嵌套路由,可以在路由规则中定义子路由。子路由可以通过 组件在父组件中进行渲染。
  4. 路由重定向: uni-simple-router 提供了路由重定向功能,可以通过 redirect 字段将某个路由规则重定向到另一个路径。

路由匹配是根据定义的路由规则顺序进行的,当路由路径与规则匹配时,对应的组件或页面将会被渲染到视图中。如果路由路径无法匹配任何规则,会触发路由的 404 处理机制

依赖警告

  • uni-simple-router 底层使用 path-to-regexp v6.2.1 作为匹配引擎,详细可查看Github
  • 新版 path-to-regexp 破坏了部分常见的匹配规则,例如:没有通配符星号 (*) - 使用参数代替 ((.*):splat*) ,详细请查看这里
  • 你可以在 演示场 实时查看 path-to-regexp 的匹配效果

简单的匹配

uni-simple-router提供了多种路由匹配方式,包括静态路径匹配动态路由参数匹配可选参数匹配通配符匹配可重复参数匹配正则表达式匹配。通过选择合适的匹配方式,你可以灵活定义路由规则以满足具体需求。以下是一个简单的示例:

js
const routes = [
  // 匹配 /home
  { path: '/home', component: Home }, // 静态路径匹配
  // 匹配 /user/3549
  { path: '/user/:id', component: User }, // 动态路由参数匹配
  // 匹配 /product/21312 或者 /product
  { path: '/product/:category?', component: Product }, // 可选参数匹配
  // 匹配 /admin/10086/111 或者 /admin/任何数据
  { path: '/admin/(.*)', component: Admin }, // 通配符匹配
  // 匹配 /posts/sdsad/11222 多个可重复的分组
  { path: '/posts/:id+', component: Posts }, // 可重复参数匹配
  // 匹配 /posts/1111 只匹配数字参数
  { path: '/users/:id(\\d+)', component: Users }, // 正则表达式匹配
]

当你使用像 :id 这样的参数定义时,它会被识别为动态路由参数。动态路由参数是一种在路由匹配过程中接受不同具体参数值的占位符。这对于一些公用组件页面非常有用,因为它可以根据传递的参数值来进行相应的处理。

另外,如果你需要更复杂的参数匹配,你也可以使用正则表达式来定义路由规则。通过在参数定义中使用正则表达式,你可以限制参数的格式和取值范围,从而满足更特定的路由匹配需求。

使用动态路由参数和正则表达式,你能够更加灵活地定义路由规则,以适应不同的场景和参数要求。这样,你可以根据具体的业务需求来设计和配置路由,让应用具备更高的可扩展性和定制性。

正则陷阱

  • 当你在路由表中使用正则匹配时,请确保对正则表达式中的反斜杠进行转义,即将反斜杠(\)变成两个反斜杠(\\)。这是因为在 JavaScript 中,反斜杠被用作转义字符,所以在实际传递字符串中的正则表达式时,需要对反斜杠进行转义以保持其原始含义。
  • 例如,如果你想在路由规则中使用 \d 来匹配数字,你需要将其转义为 \\d,以确保正则表达式能够正确解析并匹配数字。

常用的匹配

  • 匹配数字:
    • /number/:num(\\d+): 匹配一个或多个数字,如 "/number/123"
  • 匹配限定数字个数:
    • /zipcode/:code(\\d{5}): 匹配5位数字的邮政编码,如 "/zipcode/12345"
  • 匹配指定字符:
    • /category/:name(\\w+): 匹配由字母、数字和下划线组成的分类名称,如 "/category/books"
  • 匹配复杂分类:
    • /product/:category(\\w+)/:subCategory(\\w+): 匹配复杂的分类路径,如 "/product/electronics/phones"
  • 匹配年月:
    • /archive/:year(\\d{4})/:month(\\d{2}): 匹配年份和月份,如 "/archive/2022/09"
  • 匹配邮箱地址:
    • /email/:address([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}): 匹配有效的邮箱地址,如 "/email/example@example.com"
  • 匹配日期:
    • /date/:date(\\d{4}-\\d{2}-\\d{2}): 匹配格式为YYYY-MM-DD的日期,如 "/date/2022-09-15"
  • 匹配特定字符串:
    • /search/:keyword(\\bapple\\b): 匹配特定的关键字,如 "/search/apple"
  • 匹配身份证号码:
    • /id/:id(\\d{17}[\\dXx]): 匹配18位身份证号码,如 "/id/32058319900101001X"

匹配优先级

有时候,当同一个路径可以匹配多个路由时,uni-simple-router会按照路由的定义顺序来确定匹配的优先级。也就是说,谁先定义的路由,谁的优先级就最高。

例如,如果有两个路由规则如下:

js
{
  path: '/product/:id',
  component: ProductDetail
},
{
  path: '/product/:name',
  component: ProductByName
}

当用户访问 /product/123 路径时,由于两个路由规则都可以匹配该路径,uni-simple-router将会优先匹配定义顺序靠前的路由规则,即 /product/:id。这意味着 ProductDetail 组件将被渲染。

如果你希望更改路由的优先级,可以调整路由规则的定义顺序。确保最具体的路由规则在前面,较通用的路由规则在后面。

需要注意的是,一旦找到了匹配的路由规则,uni-simple-router将停止进一步的匹配。因此,在路由定义中,具有更高优先级的路由规则应该放在前面。这样可以确保路由的匹配行为符合预期。

匹配404捕捉

如果你想在uni-simple-router中实现404页面的捕捉,你可以配置一个特殊的生命周期则来处理未匹配到的路径。如需了解更详细的信息,请参阅 详细文档

路由匹配 has loaded