【Vue-Router】使用path: “/:pathMatch(.*)“匹配任意路径及路由重定向

path: "/:pathMatch(.*)" 

这一段是用来定义一个动态路由匹配器，具体来说，它匹配所有的路径。下面是对这一部分的详细解释：

1. 路径参数定义

• : 表示这是一个动态路径参数。在 Vue Router 中，使用 : 前缀可以定义一个动态的参数。
• pathMatch 是这个路径参数的名字。你可以在路由处理过程中访问这个参数的值

• 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。

  它包含了 URL 通过通配符被匹配的部分：

• // 给出一个路由 { path: '/user-*' }
  this.$router.push('/user-admin')
  this.$route.params.pathMatch // 'admin'
  // 给出一个路由 { path: '*' }
  this.$router.push('/non-existing')
  this.$route.params.pathMatch // '/non-existing'

  这里this.$route.params.pathMatch和path: "/:pathMatch对应上了

这里回顾下params和query的用法

  命名路由name 搭配 params，刷新页面，参数会丢失

  路由path 搭配 query，刷新页面，数据不会丢失

  接收参数，使用 this.$route.params、this.$route.query，就能获取到参数的值
 

  {
    path: '/set/list/:id', // 使用动态路径参数来接收 id
    name: 'setList',
    components: () => import("@/views/set/List"),
    meta: {
      title: '设置',
      keepAlive: true,
    }
  }

  this.$router.push({
    name: 'setList',
    params: {
      id: '123'，
    }
  })
  * 另一个页面接收：this.$route.params.id
  * 地址栏中会显示类似的路径：/set/List/123
  
  
  this.$router.push({
    path: '/set/List',
    query: {
      id: '123'，
    }
  })
  * 另一个页面接收：this.$route.query.id
  * 地址栏中会显示类似的路径：/set/List?id=123

2. 正则表达式

• (.*) 是一个正则表达式，表示匹配任意字符，包括 /。具体来说：
  • .：表示匹配任何单个字符（除了换行符）。
  • *：表示前面的字符可以出现零次或多次。

结合起来，(.*) 的意思是“匹配任意数量的任意字符”，所以这个正则表达式会匹配所有的路径。

3. 整体路径匹配

• /:pathMatch(.*) 这一段的整体作用：
  • 这个路由将会匹配所有可能的路径，包括 /, /abc, /abc/def, /a/b/c/d/e 等等。换句话说，任何传入的 URL 都将会被这个路由捕获，除非有其他更具体的路由被定义在它之前。

4. 兜底路由的作用

• 当你添加这样一个路由时，实际上是创建了一个兜底路由。这意味着，如果用户输入了一个不存在的路由，且没有其他匹配的路由可用，那么这个路由将会被触发进行处理。

• 由于这个路由是最后一个被匹配的路由，它的作用主要是为了确保所有未匹配的路径都会重定向到 /error/404，以便给用户返回一个统一的 404 错误页面。

5. 使用示例

• 假设你在你的应用中定义了一些其他的路由，例如：

  router.addRoute({ path: "/home", component: Home });
  router.addRoute({ path: "/about", component: About });
  

• 如果用户访问 /contact（一个未定义的路由），由于没有匹配的路由，最终将会被匹配到 /:pathMatch(.*)，并重定向到 /error/404。

总结

因此，path: "/:pathMatch(.*)" 是一个非常有用的路由定义，它可以捕获所有未定义的路径，并负责将用户导向一个 404 错误页面。这种兜底的路径匹配机制通常在单页应用中用于处理用户输入无效 URL 的情况，从而维护良好的用户体验。