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

当我们访问的路由没有预先定义的时候，就会跳到一个空白的页面。

这样的体验不太好，那么我们需要配置，访问路由不存在时跳转404页面。

实现这个小功能我用到了vue-router的路由守卫功能。

在我们上一篇《VUE3（五）vue路由vue-router4》中的ts文件中添加如下代码：

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

添加完成之后的index.ts文件如下所示：

// 引入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;
        }        
    }
}

至此，访问未定义的路由跳转404的小功能已经完成。

具体代码实现，请参考我的代码vue3代码库：https://gitee.com/camelliass/vue3blog

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site