vue3 配置 404 捕获的方式

使用这种方式会报错

export const mainOutRoutes: AppRouteModule[] = [
    {
        path: '*', // 不识别的path自动匹配404
        name: 'PageNotExist',
        component: () => import('@/views/sys/exception/404.vue'),
        meta: {
            title: 'PageNotExist',
            ignoreAuth: true
        }
    }
];

正确的方式

export const mainOutRoutes: AppRouteModule[] = [
    {
        path: '/:catchAll(.*)', // 不识别的path自动匹配404
        name: 'PageNotExist',
        component: () => import('@/views/sys/exception/404.vue'),
        meta: {
            title: 'PageNotExist',
            ignoreAuth: true
        }
    }
];

或者

export const mainOutRoutes: AppRouteModule[] = [
    {
        path: '/:pathMatch(.*)',
        name: '404',
        component: () => import('@/views/404/index.vue')
    }
];