vue3中设置404页面报错处理

Uncaught Error: Catch all routes ("") must now be defined using a param with a custom regexp.

image.png

设置404页面

在router/index.ts中

import { App } from 'vue';
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: RouteRecordRaw[] = [
...
 {
   path: '*',
   component: () => import('@/views/error/404.vue')
 }
];
export const router = createRouter({
 history: createWebHistory(),
 routes
});

export const initRouter = (app: App<Element>) => {
 return app.use(router);
};

解决方法

在vue-router@4.x中写法不同
设置如下，即可正常访问

{
   path: '/:catchAll(.*)',
   component: () => import('@/views/error/404.vue')
 }