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