class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1">

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

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

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">{
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">  path: '*', // 捕获所有路径
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">  name: "error_404",
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">  meta: {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">    title: "404-页面不存在",
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">  },
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">  component:  () => import("@iews/error-page/404.vue")
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">} class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

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

 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="1"> class="hljs-ln-code"> class="hljs-ln-line">{
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="2"> class="hljs-ln-code"> class="hljs-ln-line">    path: "/:catchAll(.*)",
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="3"> class="hljs-ln-code"> class="hljs-ln-line">    name: "error_404",
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="4"> class="hljs-ln-code"> class="hljs-ln-line">    meta: {
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="5"> class="hljs-ln-code"> class="hljs-ln-line">      title: "404-页面不存在",
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="6"> class="hljs-ln-code"> class="hljs-ln-line">    },
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="7"> class="hljs-ln-code"> class="hljs-ln-line">    component: () => import("@/views/error-page/404.vue"),
 class="hljs-ln-numbers"> class="hljs-ln-line hljs-ln-n" data-line-number="8"> class="hljs-ln-code"> class="hljs-ln-line">} class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)">

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

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

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

三、总结

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

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

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

发表评论

登录后才能发表评论和回复 注册

/ 登录

提交评论

评论记录：

未查询到任何数据！

回复评论：

×

关闭 提交评论