正则来匹配一切：VueRouter@4 路由匹配的那些事儿

前言

在使用 VueRouter@4 动态路由中自定义正则匹配规则的时候遇到了几处误区，网上搜集资料也是各有说法。今天本文将结合官方文档和自己的理解，为大家带来 VueRouter@4 路由匹配中自定义正则的正确用法。

误区一：使用正则表达式可以匹配所有字符

在 VueRouter@4 中，使用正则表达式来匹配 URL 路由时，并不是所有字符都可以匹配的。例如，以下正则表达式将无法匹配包含空格的 URL：

/^\/([a-zA-Z0-9]+)\/?$/

这是因为正则表达式中的 [a-zA-Z0-9]+ 只匹配字母和数字，而空格不是字母或数字。因此，如果要匹配包含空格的 URL，需要使用以下正则表达式：

/^\/([a-zA-Z0-9 ]+)\/?$/

在该正则表达式中，[a-zA-Z0-9 ]+ 将匹配字母、数字和空格。

误区二：使用正则表达式可以匹配多个路径片段

在 VueRouter@4 中，使用正则表达式来匹配 URL 路由时，只能匹配一个路径片段。例如，以下正则表达式将无法匹配 /user/profile 和 /user/settings 这两个 URL：

/^\/user\/([a-zA-Z0-9]+)\/?$/

这是因为正则表达式中的 ([a-zA-Z0-9]+) 只匹配一个路径片段，而 /user/profile 和 /user/settings 这两个 URL 包含两个路径片段。因此，如果要匹配多个路径片段，需要使用以下正则表达式：

/^\/user\/([a-zA-Z0-9]+)\/([a-zA-Z0-9]+)\/?$/

在该正则表达式中，([a-zA-Z0-9]+) 将匹配第一个路径片段，([a-zA-Z0-9]+) 将匹配第二个路径片段。

误区三：使用正则表达式可以匹配通配符

在 VueRouter@4 中，使用正则表达式来匹配 URL 路由时，不能使用通配符。例如，以下正则表达式将无法匹配 /user/* 和 /user/profile/* 这两个 URL：

/^\/user\/(.*)\/?$/

这是因为正则表达式中的 (.*) 是一个贪婪匹配，它将匹配 URL 中的任何字符，包括 / 字符。因此，如果要匹配通配符，需要使用以下正则表达式：

/^\/user\/([a-zA-Z0-9]+)\/?$/

在该正则表达式中，([a-zA-Z0-9]+) 将匹配一个路径片段，而 \/? 将匹配可选的 / 字符。

三类常见正则匹配区别

1. /:path

匹配一个路径片段，路径片段可以是任何字符，包括 / 字符。例如，以下路由将匹配 /user/profile 和 /user/settings 这两个 URL：

{
  path: '/user/:path'
}

2. /:path(.*) *

匹配一个或多个路径片段，路径片段可以是任何字符，包括 / 字符。例如，以下路由将匹配 /user/profile、/user/profile/edit 和 /user/profile/settings 这三个 URL：

{
  path: '/user/:path(.*)*'
}

3. /:path(.*)

匹配一个或多个路径片段，路径片段可以是任何字符，但不能包含 / 字符。例如，以下路由将匹配 /user/profile 和 /user/profile/edit 这两个 URL，但无法匹配 /user/profile/settings 这个 URL：

{
  path: '/user/:path(.*)'
}

结束语

希望本文对大家理解 VueRouter@4 中的正则表达式匹配规则有所帮助。如果您还有其他问题，请随时留言提问。