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

设置404页面


配置路由

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

ts 复制代码
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 页面

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

页面显示如下

相关推荐
雪碧聊技术14 小时前
v-for的用法及案例
vue3·uniapp·v-for·购物车案例
做梦都在学习前端2 天前
发布一个monaco-editor 汉化包
前端·npm·vite
前端进阶者2 天前
vite调试node_modules下面插件
前端·vite
天天鸭2 天前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
charlee444 天前
nginx部署发布Vite项目
nginx·性能优化·https·部署·vite
Modify_QmQ4 天前
leaflet【十一】地图瓦片路径可视化
gis·vue3·leaflet·leafletmapblock
奋飛5 天前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
ldj202015 天前
vue3整合element-plus
vue3
微风好飞行15 天前
Vite 打包 vscode 扩展遇到的模块问题
javascript·vscode·vite
风吹一夏v17 天前
webpack到vite的改造之路
webpack·vue·vite