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

页面显示如下

相关推荐
念念不忘 必有回响6 小时前
nginx前端部署与Vite环境变量配置指南
前端·nginx·vite
学会煎墙12 小时前
使用uniapp——实现微信小程序的拖拽排序(vue3+ts)
微信小程序·uni-app·vue·ts
一只小阿乐21 小时前
做一个vue3 v-model 双向绑定的弹窗
javascript·vue.js·elementui·vue3·v-model
IT教程资源C1 天前
(N_156)基于springboot,vue小区物业管理系统
mysql·vue3·前后端分离·springboot小区物业
我爱甜妹4 天前
vite项目保存代码后不刷新页面 vite热更新
vite
jason_yang5 天前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
Sheldon一蓑烟雨任平生5 天前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
麦麦大数据6 天前
D026 vue3+django 论文知识图谱推荐可视化系统 | vue3+vite前端|neo4j 图数据库
前端·django·vue3·知识图谱·推荐算法·论文文献·科研图谱
wanfeng_096 天前
stripe/paypal
react·ts·nextjs·paypal·stripe
duansamve6 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff