当我们访问的路由没有预先定义的时候，就会跳到一个空白的页面。
这样的体验不太好，那么我们需要配置，访问路由不存在时跳转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
