本文共 950 字，大约阅读时间需要 3 分钟。

@[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
   
     = [  {
       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;
   

转载地址：http://bznvb.baihongyu.com/