编辑
一、情况介绍
前几天要做一个小项目的demo，习惯性的将自己做的一个vue3+vite的项目中好用的结构和模版都套用过来，结果发现路由乱了套，除了首页其他所有路径匹配到的都是404页面，这就很抽象，我404页面设计得再美观，也不能都显示404吧？可是我是从正在开发的现成项目里掏出来的，怎么可能有问题？
最后查了很久，才发现是路由通配符的问题，新项目是基于vue2的（别问为什么用vue2，问就是demo的对象只看得懂vue2），很多路由通配符都不支持。
最后老老实实用最常规的路由通配符解决问题：
编辑
既然涉及到了这里，那就好好熟悉熟悉vue中路由通配符的用法吧。
二、路由通配符
2.1、路由通配符是什么
路由通配符是网络编程中用于匹配网络地址的一部分或全部的一种符号。在路由表中，通配符可以用来指定一个或多个网络地址范围，使得路由规则更加灵活和通用。
路由通配符的使用可以简化路由表的配置，使得网络管理员能够用较少的规则来管理更大的地址空间。这对于大型网络环境尤其有用，因为它可以减少路由表的大小并提高路由效率。
在路由配置中，还有一个近似的概念：通配符掩码（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页面的路由通配符也有超多的用法和细节。
更多丰富的前端内容请看：各种前端问题的技巧和解决方案
博客不应该只有代码和解决方案，重点应该在于给出解决方案的同时分享思维模式，只有思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
