手写VUE后台管理系统8 - 配置404NotFound路由

设置404页面

• • • 配置路由
    • 404页面

---

配置路由

这里配置了两个路由，一个是主页，另外一个则匹配任意路由显示为404页面。因为只配置了两个路由，如果路径没有匹配到主页，则会被自动导向到404页面，这样就可以实现整站统一的404页面。

import { RouteRecordRaw } from "vue-router"

const routes: RouteRecordRaw[] = [{
    name: "Home",
    path: '/',
    component: () => import('@/views/dashboard/home/Index.vue')
}, {
    path: '/:pathMatch(.*)',
    component: () => import('@/views/exception/404.vue')
}]

export default routes

404页面

使用 ant 提供的组件实现 404 页面

<template>
    <a-result status="404" title="404" sub-title="页面不存在">
        <template #extra>
            <a-button type="primary">返回首页</a-button>
        </template>
    </a-result>
</template>

页面显示如下