推荐|路由通配符，小小的字符有大大的作用，你真的熟悉吗？

在路由配置中，还有一个近似的概念：通配符掩码（Wildcard Mask）。通配符掩码一般用来做IP的通配，其与网络掩码相对应，用于指定哪些部分的IP地址是固定的，哪些部分是可变的。例如，如果你有一个IP地址192.168.1.0和通配符掩码0.0.0.255，这意味着你可以匹配从192.168.1.0到192.168.1.255的任何IP地址。

2.2、路由通配符能用来干什么

路由通配符在Web开发中非常有用，特别是在构建单页面应用（SPA）时。其主要用途包括：

动态路由匹配: 路由通配符可以用来创建动态路由，匹配URL中的特定部分。例如，在Vue Router中，/users/:id 可以匹配任何用户ID。
捕获任意路径: 路由通配符可以捕获URL的任意部分，如Vue Router中的 /:catchAll(.*)，这可以用来创建通用的404页面或重定向规则。
嵌套路由: 在嵌套路由中，通配符可以用来捕获父路由和子路由之间的部分。例如，/:parentId/subpage 可以匹配任何父ID下的子页面。
模式匹配: 路由通配符可以与正则表达式结合使用（在支持的框架中），以匹配符合特定模式的URL。这提供了更复杂的路由匹配能力。
重定向: 在某些情况下，你可能需要根据URL的特定部分进行重定向。路由通配符可以帮助识别这些URL并执行重定向。
加载组件: 根据URL的不同部分动态加载不同的组件。例如，不同的用户ID可能需要加载不同的用户资料组件。
查询参数处理: 虽然查询参数不是路由的一部分，但路由通配符的概念可以扩展到查询参数的处理，允许你根据查询参数的不同来加载不同的视图或数据。
路由守卫: 在某些框架中，路由通配符可以与路由守卫结合使用，根据URL的特定部分来执行权限检查或其他逻辑。
SEO优化: 对于需要服务器端渲染（SSR）或预渲染的应用，路由通配符可以帮助匹配和渲染适合SEO的URL。
API路由: 在某些情况下，路由通配符也可以用来定义API路由，匹配特定的请求路径，并将它们映射到相应的数据处理逻辑。

2.3、常用的路由通配符

2.3.1、常用的路由通配符有哪些

以下是一些常见的路由通配符：

星号(*)：星号通常用于表示一个或多个任意字符。在路由中，星号可以表示任意长度的网络前缀。
问号(?)：问号通常用于表示单个任意字符。在路由中，它可能不常用，但在某些上下文中，它可能用来表示单个位的任意值。
方括号([])：方括号用于定义一个字符集合，匹配方括号内的任意一个字符。例如，[0-9]可以匹配任何单个数字。
花括号({})}：花括号用于定义一个或多个选项的集合，匹配花括号内的任意一个选项。例如，{192.168.1.1, 192.168.1.2}可以匹配这两个IP地址中的任意一个。
正斜杠(/)：在CIDR（无类别域间路由）表示法中，正斜杠后面跟一个数字，表示网络掩码的长度。例如，192.168.1.0/24表示前24位是网络部分，剩下的8位是主机部分。
点分十进制：在IP地址中，点分十进制用来表示IP地址，每个部分可以是0到255之间的任意十进制数。

2.3.2、常用的路由通配符用法举例

常用的路由通配符用法如下：


// 1、 星号(*)：星号通常用于表示一个或多个任意字符。在路由中，星号可以表示任意长度的网络前缀。
 
 
{
  path: '*', // 捕获所有路径
  name: "error_404",
  meta: {
    title: "404-页面不存在",
  },
  component:  () => import("@iews/error-page/404.vue")
}
 
// 2、问号(?)：问号通常用于表示单个任意字符。它表示前面的字符是可选的。
 
// 这个路由会匹配 /users 和 /users?page=1 等路径
const routes = {
  path: '/users',
  component: Users,
  children: [
    {
      path: '?page',
      component: UsersList
    }
  ]
};
 
// 3、方括号([])：方括号用于定义一个字符集合，匹配方括号内的任意一个字符。例如，[0-9]可以匹配任何单个数字。
// 这个路由会匹配 /files/jpg 或 /files/png
{
  path: '/files/:format([jpg|png])',
  name: 'files',
  component: Files
}
 
 
// 4、花括号({})}：花括号用于定义一个或多个选项的集合，匹配花括号内的任意一个选项。例如，{192.168.1.1, 192.168.1.2}可以匹配这两个IP地址中的任意一个。
// 花括号在路由定义中不常用，但在某些情况下，可以用于表示一组可选的参数。例如，在Sails.js中，可以这样使用：
// 这个路由会匹配 /user/edit/123 或 /user/view/123
{
  path: '/user/{action}/{id}',
  action: 'user'
}
 
// 5、正斜杠(/)：在CIDR（无类别域间路由）表示法中，正斜杠后面跟一个数字，表示网络掩码的长度。例如，192.168.1.0/24表示前24位是网络部分，剩下的8位是主机部分。
// 这个路由会匹配 /about 和 /about/team
<Route path="/about" component={About} />
<Route path="/about/team" component={Team} />
 
// 6、点分十进制：在IP地址中，点分十进制用来表示IP地址，每个部分可以是0到255之间的任意十进制数。
app.use(async (ctx) => {
  if (ctx.path === '/api/1.0/data') {
    ctx.body = 'Data from API version 1.0';
  }
});

2.4、vue2与vue3中用来捕获任意路径的通配符

这个是最常用，也是每个人都一定需要做的东西（谁家网站能没有404页面的呢，或精致或草率，怎么都得做一个吧）。比如最常见的：


{
  path: '*', // 捕获所有路径
  name: "error_404",
  meta: {
    title: "404-页面不存在",
  },
  component:  () => import("@iews/error-page/404.vue")
}

这个就是支持vue2的用法，但是在vue3中，有了新的解决方案：


{
    path: "/:catchAll(.*)",
    name: "error_404",
    meta: {
      title: "404-页面不存在",
    },
    component: () => import("@/views/error-page/404.vue"),
}

其中l(.*)是一个正则表达式，用来表示匹配任何字符（.）零次或多次（*）。这意味着从 :catchAll 的位置开始，直到路径的末尾，所有的字符都会被捕获。
:catchAll 是一个动态路由段的名称，它的作用是捕获路由路径中剩余的所有部分。这个名称 catchAll 是自定义的，可以使用任何其他名称来代替它。但是一般为了遵守语义化规则，还是直接用catchAll这个名字（捕获所有剩余的路径）。

此外，使用path: "/:catchAll(.*)"还有一个好处就是能够将捕获的路径将作为参数传递给对应的组件。在 Vue Router 中，这个参数可以通过 this.$route.params.catchAll 来访问（如果命名为其他内容比如"/:otherPath(.*)"，那么就可以通过this.$route.params.otherPath来访问）。

使用 :catchAll 可以创建非常灵活的路由规则，因为它可以匹配几乎任何形式的 URL。所以用来做404页面的路由匹配符非常好用。

三、总结

小小的一个匹配404页面的路由通配符也有超多的用法和细节。

更多丰富的前端内容请看：各种前端问题的技巧和解决方案

博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~

文章知识点与官方知识档案匹配，可进一步学习相关知识

Vue入门技能树首页概览43124 人正在系统学习中

一、情况介绍

二、路由通配符

2.1、路由通配符是什么