---

配置路由

这里配置了两个路由，一个是主页，另外一个则匹配任意路由显示为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>

页面显示如下