vue3 路由地址错误跳转到通用 404 页面

页面空白,这样用户看到很不友好,一般会将没有匹配的页面显示一个通用的提示页面

在路由文件添加

const routes = [
{ // 其他路由
path: '/home',
.....
},
{ // 同级位置,增加一个 404 页面地址
path: "/404",
component: () => import("../views/noFindPage.vue"),
},
{
path: "/:catchAll(.*)", // vue2 是 path: '*', vue3 需要写这种正则匹配
redirect: "/404",
},
]