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