vue3配置路由报错Catch all routes (“*“) must now be defined using a param with a custom regexp.

@[TOC](vue3配置路由报错Catch all routes ("*") must now be defined using a param with a custom regexp.)

背景

vue3项目在配置路由时指定未识别的路径自动跳转404页面时，报错Catch all routes ("*") must now be defined using a param with a custom regexp.
意思是捕获所有路由（“”）现在必须使用带有自定义正则表达式的参数来定义

解决方案

改为以下配置方式：

{
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
},

完整路由配置：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: () => import('@/views/Index/Index.vue'),
  },
  // {
  //   path: '/', // 根目录自动匹配/home
  //   redirect: '/index',
  // },
  {
    path: '/404',
    name: 'PageNotExist',
    component: () => import('@/views/PageNotExist/PageNotExist.vue'),
  },
  {
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;