vue3中如何捕获所有路由或 404 Not found 路由

背景

事情是这样的，在 vue3 中想要捕获所有路由，如果采用 vue2 path: '*'的写法控制台会抛出这样的错误 Catch all routes ("*") must now be defined using a param with a custom regexp.，意思是现在必须使用带有自定义正则表达式的参数来定义。

如何解决

解决方案也很简单，具体如下：

vue2中

const routes = [
  // 其他路由...
  {
    path: '*',
    redirect: '/404',
  },
]

vue3中

const routes = [
  // 其他路由...
  {
    path: '/:404',
    redirect: '/404',
  },
]

在这里 path: '/:404' 中的 :404是不是很熟悉，没错就是动态路由，你可以把这个 :404 当成一个参数，如果输入一个不存在的路由地址 /a/b/123，此时的 :404 匹配到的就是 /a/b/123，然后被重定向到 '/404'，项目中也是这样捕获所有路由或 404 Not found 路由的。

补充

常规参数只匹配 url 片段之间的字符，用 / 分隔。如果我们想匹配任意路径，我们可以使用自定义的 路径参数 正则表达式，在 路径参数 后面的括号中加入正则表达式:

const routes = [
  // 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下
  { path: '/user-:afterUser(.*)', component: UserGeneric },
]

参考

1. Vue Router 动态路由匹配