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

歡迎訪問小程序：