手写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>

页面显示如下
手写VUE后台管理系统8 - 配置404NotFound路由_第1张图片

你可能感兴趣的:(大前端,vite,vue3,ts)