VUE3（六）项目配置使用404页面

/**
 * 路由守卫
 */
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router);
});
/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) => {
  console.log("error:", handler);
});

// 引入vue-router对象
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
// 引入路由守卫方法
import beforeEach from "/@/router/beforeEach.ts";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
  {// 后端管理系统路由组
    path: "/admin",
    redirect: "/admin/home",
    name: "admin",
    component: () => import("/@/views/admin.vue"),
    children: [
        {
            path: "home",
            name: "home",
            meta: { 
              requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
            },
            component: () => import("/@/views/admin/Home.vue")
        },
        {
            path: "setting",
            name: "setting",
            meta: { 
              requireAuth: true // 添加该字段，表示进入这个路由是需要登录的
            },
            component: () => import("/@/views/admin/Setting.vue")
        },
    ]
  },
  {// 博客主站pc端页面路由
    path: "/pc",
    redirect: "/pc/index",
    name: "pc",
    component: () => import("/@/views/pc.vue"),
    children: [
        {
            path: "index",
            name: "首页",
            component: () => import("/@/views/pc/Home.vue"),
        },
    ]
  },
  {// 博客主站手机端页面路由
    path: "/phone",
    redirect: "/phone/pindex",
    name: "phone",
    component: () => import("/@/views/phone.vue"),
    children: [
        {
            path: "pindex",
            name: "Home",
            component: () => import("/@/views/phone/Home.vue")
        },
    ]
  },
];
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 路由守卫
 */
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router);
});
/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) => {
  console.log("error:", handler);
});
/**
 * 输出对象
 */
export default router;
路由守卫中，我调用了beforeEach.ts中封装的一个方法：
// 引入路由守卫方法
import beforeEach from "/@/router/beforeEach.ts";
beforeEach.checkAuth(guard, router);
beforeEach.ts
import { Router } from "vue-router";
export default
{
    /**
     * 路由守卫检查权限
     * @param guard 
     * @param router 
     */
    checkAuth(guard: any, router: Router) 
    {
        //检查路由是否存在
        if (!router.hasRoute(guard.name)) {
            //三层不同404路由
            if (guard.fullPath.indexOf("/frame") >= 0) 
            {
                router.push("/404");
            } 
            else if (guard.fullPath.indexOf("/pages") >= 0) 
            {
                router.push("/404");
            } 
            else 
            {
                router.push("/404");
            }
            return;
        }        
    }
}